angular / angular/components

bug(mat-icon): Inline mat-icon inherits line-height incorrectly resulting in clipping

Offen
#26,042 2 Kommentare 8 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/icon P2
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

13

### Description

Any `line-height` set on a parent of an inline `mat-icon` with a larger font size results in clipping. As an example, let's add `mat-typography` on `body` which sets the font of the element it is placed on to `body-1`. This includes setting `line-height` to 20px. `.mat-icon-inline` sets `line-height` to `inherit`. This results in the line height being set to 20px and any font size larger than 20px causing clipping.

This problem was hidden by the fact that in earlier versions, the mat-icon overflowed so no clipped occurred. However, since #12429, overflow is set to hidden and clipping occurs.

### A fix
The fix I found is removing `line-height: inherit` which allows `.material-icons`'s `line-height: 1` to apply. I can make a PR to make this change.

### Reproduction

Steps to reproduce:
1. Set line height on body
2. Add an inline mat-icon with font-size larger than the line height set previously

See https://stackblitz.com/edit/components-issue-vwhnst?file=src/app/example-component.html

**Before v14 (overflowing mat-icon)**
This mat-icon has 38.4 margin top and bottom and a font-size of 76.8px.
![image](https://user-images.githubusercontent.com/16807587/203090601-a4ec1f51-b3fc-4441-9b80-3c520f512897.png)

**Since v14**
![image](https://user-images.githubusercontent.com/16807587/203091141-1d505a86-bf76-4cea-be3a-be42d63da21d.png)

### Expected Behavior

The icon should scale with font-size without clipping.

In this screenshot, the line-height is set to 1, the margin is correctly applied, and no clipping occurs.
![image](https://user-images.githubusercontent.com/16807587/203091898-f0eb05d1-925f-483e-90c2-d2831bd53017.png)

### Actual Behavior

The icon is clipped due to the line-height not being 1. This is caused by `line-height: inherit`.

### Environment

Angular CLI: 14.1.3
Node: 16.18.1
Package Manager: npm 8.19.2
OS: linux x64

Angular: 14.1.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1401.3
@angular-devkit/build-angular 14.1.3
@angular-devkit/core 14.1.3
@angular-devkit/schematics 14.1.3
@schematics/angular 14.1.3
rxjs 6.6.7
typescript 4.7.4

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start with the .mat-icon-inline and .material-icons styles, then run the linked StackBlitz reproduction at src/app/example-component.html with a parent line-height and larger inline icon font size. The work is done when the icon scales with the font size and is no longer clipped, while the existing material icon behavior remains intact.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, css, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
1/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
52/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.