bug(COMPONENT): mat-icon-button needs to be wrapped to apply density

[VeroNemo]

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

No response

Description

When applying custom density (via a custom CSS class) using Angular Material Theme API directly to Angular Material button (e.g., mat-flat-button, mat-stroked-button), the height is adjusted as expected. However, when the custom density context (the same CSS class as for mat-stroked-button etc) is applied directly to a button mat-icon-button, the size of it remains unchanged. The density changes are only applied if the mat-icon-button is wrapped in an element with the density class.

Reproduction

StackBlitz link: https://stackblitz.com/edit/sb1-41rfph?file=src%2Fapp%2Fapp.component.scss
StackOverflow link: https://stackoverflow.com/questions/79227144/mat-icon-button-needs-to-be-wrapped-to-apply-density

Steps to reproduce:

1. Create css class:
   .ui-high-density { @include mat.icon-button-density(-2); }

2. Apply css class .ui-high-density to button:
   A. mat-flat-button
   <button mat-flat-button class="ui-high-density">Some text</button>
   B. mat-icon-button
   <button mat-icon-button class="ui-high-density">Some text</button>

Expected Behavior

The size of height on both, mat-flat-button and mat-icon-button, will change.

Actual Behavior

The height change only on mat-flat-button and mat-icon-button stay the same.

When I wrapped mat-icon-button into div with class ui-hight-density, the height of button changed.
<div class="ui-high-density">
<button mat-icon-button>
<mat-icon>home</mat-icon>
</button>
</div>

Environment

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

[voi99]

Any updates?

[crisbeto]

For reference, this is only an issue in M2 and is caused by this https://github.com/angular/components/blob/main/src/material/button/_icon-button-theme.scss#L107. We we were tokenizing the components, these styles were difficult to land without breaking a bunch of internal applications so we ended up keeping them.