Angular 14升级至15后mat-icon-button出现圆形背景问题求助

Angular Material 15对组件默认样式做了调整，mat-icon-button的默认背景不再是透明，而是继承了主题的surface色调，这是版本升级带来的预期样式变更，即便文档描述未及时同步细节，也属于正常的版本迭代变化。

以下是几种可行的解决办法：

• 全局/局部样式覆盖
  在全局样式文件（如styles.scss）或组件专属样式文件中添加自定义样式，强制将背景设为透明：

  .mat-icon-button {
    background-color: transparent !important;
    // 可选：覆盖hover、focus等交互状态的背景色
    &:hover, &:focus {
      background-color: rgba(0, 0, 0, 0.1) !important;
    }
  }
  

• 自定义Material主题配置
  若希望全局统一修改mat-icon-button的样式行为，可以在主题配置文件中自定义按钮参数：

  @use '@angular/material' as mat;
  
  $custom-button-theme: mat.button-theme(
    $theme,
    (
      icon-button: (
        background-color: transparent,
        hover-background-color: rgba(0, 0, 0, 0.1),
      )
    )
  );
  
  @include mat.all-component-themes($custom-button-theme);
  

• 改用原生按钮搭配mat-icon
  如果不需要mat-icon-button的额外交互特性，也可以直接使用原生按钮配合mat-icon，手动控制样式：

  <button style="background: transparent; border: none; padding: 0;">
    <mat-icon>menu</mat-icon>
  </button>
  

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