为何Angular Material的mat-icon-button需包裹元素应用自定义密度，其他按钮无需？

在Angular 18搭配Angular Material 18（Material Design 3）环境中，使用Angular Material主题API通过自定义CSS类（如.ui-high-density）为mat-flat-button、mat-stroked-button等按钮应用自定义密度时，按钮高度可按预期调整。但将同一类直接应用于<button mat-icon-button>时，按钮尺寸无变化，仅当将mat-icon-button包裹在带有该类的元素中时，密度变更才会生效。

代码示例 #

HTML 片段 #

<!-- 高度按预期变化 -->
<button mat-flat-button class="ui-high-density">Some text</button>

<!-- 高度无变化 -->
<button mat-icon-button class="ui-high-density">Some text</button>

<!-- 高度按预期变化 -->
<div class="ui-high-density">
   <button mat-icon-button>
      <mat-icon>home</mat-icon>
   </button>
</div>

SCSS 类定义 #

.ui-high-density {
   @include mat.icon-button-density(-2);
}

核心原因是Angular Material不同按钮的密度混合宏实现逻辑存在差异：

• 对于mat-flat-button这类常规按钮，对应的密度宏（如flat-button-density）生成的CSS选择器会直接作用在按钮元素自身，当自定义类直接添加到按钮上时，宏生成的样式能正确覆盖默认值。
• 而icon-button-density宏生成的是后代选择器（例如.ui-high-density .mat-mdc-icon-button），它只会匹配自定义类容器下的图标按钮，无法匹配类直接加在按钮上的情况（即.mat-mdc-icon-button.ui-high-density）。

如果想要直接将自定义类添加到mat-icon-button上生效，可以修改SCSS代码，调整选择器的作用范围：

.ui-high-density.mat-mdc-icon-button {
   @include mat.icon-button-density(-2);
}

内容的提问来源于stack exchange，提问作者Veronika