bug(material/button): incorrect alignment of svg icons

[Lutsykm]

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

20.0.5

Description

After update to angular/material 20.1.+

Material buttons with icons no longer align properly.

---

Before

After

---

What causing an issue?

After removing min-height, everything works as before.
My icon size is 24px, but with min-height: fit-content, the .mat-icon container gets stretched while the SVG icon remains the same size.

For example:

• .mat-icon: 24px × 29px
• svg: 24px × 24px

This causes vertical misalignment of icons compared to previous versions.

I believe this PR is the cause of this issue.: #30891
commit -> 87b6962

---

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

The .mat-icon inside .mat-mdc-button-base should remain properly aligned and not stretch vertically.
The mat-icon container should match the size of the SVG icon (24px × 24px) when the icon size is set to 24px.

Actual Behavior

With min-height: fit-content; applied, the .mat-icon container stretches vertically (e.g., 24px × 29px) while the SVG icon stays 24px × 24px.
This causes misalignment and extra spacing around the icon compared to previous versions.

Environment

• Angular: 20.1.2
• CDK/Material: 20.1.2
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

I can reproduce it as well, specifically with SVG icons. I can fix it by setting the icon to be display: inline-flex instead of display: inline-block, but I expect that'll break quite a bit of screenshots internally.

[jamesbenrobb]

I've just upgraded a project from v19 to v20 and am experiencing the same issue.

My svg is 18px x 18px, but removing min-height: fit-content makes no difference