如何在Angular Material M3中正确覆盖mat-icon-button的圆角？

Angular Material M3为mat-icon-button提供了专门的Sass混合器，无需硬写CSS选择器就能规范覆盖样式，逻辑和你使用的常规按钮override一致：

直接使用mat.icon-button-overrides混合器，传入需要修改的参数即可，比如调整圆角：

@include mat.icon-button-overrides((
    container-shape: 8px
));

如果需要更细粒度的控制（比如不同交互状态的样式），可以在配置对象里添加对应参数，比如修改hover和点击时的状态层颜色：

@include mat.icon-button-overrides((
    container-shape: 8px,
    hover-state-layer-color: rgba(0, 0, 0, 0.08),
    pressed-state-layer-color: rgba(0, 0, 0, 0.12)
));

这种方式完全遵循Material Design 3的设计系统规范，不会出现硬覆盖样式带来的兼容性或维护问题。

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