Angular中mat-icon图标显示为灰色如何设置为红色？

你当前用mdi图标配合mat-icon加matSuffix时图标一直显示灰色，本质是两个原因：一是matSuffix会自动注入Material表单控件后缀的默认灰色样式，二是自定义样式优先级不够覆盖默认规则，以下是可直接落地的实现方式：

方案1：用Material内置语义化属性（推荐，适配项目主题） #

Angular Material的mat-icon原生支持color属性，直接传warn就会自动调用项目主题配置的错误态红色，不需要硬编码色值，适配明暗主题、自定义主题：

<mat-icon
    *ngIf="form.hasError('required', 'name') && isNameSubmitted"
    class="mdi mdi-24px mdi-alert-circle"
    matSuffix
    color="warn">
</mat-icon>

如果就要用纯红色，直接加内联样式即可，内联样式优先级最高，不会被默认样式覆盖：

<mat-icon
    *ngIf="form.hasError('required', 'name') && isNameSubmitted"
    class="mdi mdi-24px mdi-alert-circle"
    matSuffix
    style="color: #ff0000;">
</mat-icon>

方案2：自定义公共样式类（适合多场景复用） #

如果项目里多处要用错误状态红色图标，可自定义公共样式类，注意处理Angular视图封装的样式穿透问题：

1. 在对应组件的样式文件（或全局样式文件）中添加：

/* 全局样式可直接写，组件样式需要加穿透标识 */
:host ::ng-deep .mat-icon.error-alert-icon {
  color: #ff0000;
}

如果不想用::ng-deep，也可以加!important提升优先级，不推荐但生效快：

.error-alert-icon {
  color: #ff0000 !important;
}

2. 模板中给图标绑定对应类名：

<mat-icon
    *ngIf="form.hasError('required', 'name') && isNameSubmitted"
    class="mdi mdi-24px mdi-alert-circle error-alert-icon"
    matSuffix>
</mat-icon>

常见无效写法避坑 #

• 不要给字体类型的mdi图标设置fill属性改色：fill仅对SVG格式图标生效，字体图标仅识别color属性
• 不要只在父容器设置红色指望继承：matSuffix注入的样式是直接作用在mat-icon宿主上的，优先级高于继承样式，必须直接给图标本身设置色值
• 不要遗漏视图封装处理：Angular默认开启视图模拟封装，组件内写的样式不加穿透的话，无法作用在Material组件的宿主元素上，会出现写了样式不生效的问题

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