search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

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

Open MatthiasKunnen opened 1 year ago

MatthiasKunnen commented 1 year ago

Is this a regression?

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

Since v14 image

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

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

Spawnrad commented 1 year ago

I have exactly the same issue. Bug since 2022 what happens?