bug(mat-icon): the icon is cut off in some cases

[Den-dp]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

13

Description

I found that after updating from angular/material@13 to 14 - mat-icon started to "crop" the icon inside.

I see it in my app but also in the official angular material docs site https://material.angular.io

Reproduction

Steps to reproduce:

1. navigate to https://material.angular.io/
2. open theme selector

Expected Behavior

https://v13.material.angular.io/

Actual Behavior

note the hight of the right mat-icon

https://material.angular.io/

Environment

• Angular: 14
• CDK/Material: 14.2.4
• Browser(s): Google Chrome
• Operating System: Windows

[Den-dp]

And of course, I have the same mat-icon issue in my project (but in my case, it affects the checkbox mat-icon)

For now I'm using the following fix:

.mat-icon {
  overflow: initial !important;
}

[amysorto]

Seems to be working in v15 and v16 now

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}