Angular Material中如何设置mat-icon为禁用显示状态

之前方案失效的原因 #

• mat-icon不属于可交互表单控件，原生不支持[disabled]属性，直接绑定不会触发任何内置样式
• mat-icon的color输入仅接收primary/accent/warn三个预置主题色，传入disabled属于无效值，不会生效
• mat-icon-button包裹方案失效和图标放在mat-expansion-panel内部无关，通常是因为没有正确导入MatButtonModule，或是没有给按钮本身绑定disabled状态
• 你之前写的自定义CSS不符合规范的核心问题是硬编码了gray颜色值，没有复用Material主题体系内的标准状态色，而非自定义类本身不合规。

推荐实现方案 #

方案1：纯状态标识图标（无交互），用主题内置禁用色（最推荐，完全符合设计规范） #

你不需要硬编码颜色值，只需要调用Material提供的SCSS工具函数，从项目当前主题中取标准禁用文本色即可，最终视觉效果和所有Material组件的禁用态完全统一：

1. 先在组件的SCSS文件中导入Material主题工具和你项目的主题配置（路径按项目实际结构调整）

@use '~@angular/material' as mat;
// 导入你项目中定义的$palette-politie-blauw和主主题配置
@import 'src/styles/theme.scss';

2. 修改样式规则，替换硬编码的gray为主题内置禁用色

.icon-accordeon {
  color: mat.get-color-from-palette($palette-politie-blauw, 700);

  &.disabled {
    // 取Material标准禁用文本色，自动适配明/暗主题
    color: mat.get-color-from-palette(mat.get-theme-foreground-palette($your-app-theme), disabled-text);
    // 对齐Material默认禁用态透明度，不需要可以删除
    opacity: 0.38;
  }
}

3. 模板部分原有的[ngClass]绑定逻辑不需要改动，可直接使用：

<mat-icon
  [ngClass]="{'icon-accordeon': true, 'disabled': !hasStatusGeleverd}">
    {{hasStatusGeleverd ? 'check_circle' : 'hourglass_bottom'}}
</mat-icon>

方案2：图标为可交互按钮场景，用mat-icon-button原生禁用态 #

如果这个图标本身是可点击的操作按钮，用mat-icon-button包裹是官方推荐写法，不需要自定义任何样式即可获得标准禁用效果：

1. 先确认对应业务模块已经导入MatButtonModule

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [/* 其他已导入模块 */ MatButtonModule, MatIconModule],
})
export class YourPanelModule {}

2. 模板中直接给按钮绑定disabled状态即可，内部图标会自动应用禁用样式：

<button 
  mat-icon-button 
  [disabled]="!hasStatusGeleverd"
  class="icon-accordeon">
  <mat-icon>
    {{hasStatusGeleverd ? 'check_circle' : 'hourglass_bottom'}}
  </mat-icon>
</button>

注意：如果图标仅做状态展示、没有点击交互，不要额外套按钮元素，用方案1即可。

Angular 12版本兼容提示 #

你使用的12.2.x版本Material完全支持上述API，如果项目用的是旧版主题写法，也可以直接在主题文件中提前取出禁用色定义为变量，在组件样式中复用即可，不需要每次调用工具函数。

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