Angular Material v15升级后matListItemIcon图标变灰的样式问题

以下几种方法可以解决你遇到的图标样式失效问题：

• 使用样式穿透（::ng-deep）
  直接在组件样式文件中穿透 Angular 的样式封装，覆盖图标颜色：

  ::ng-deep .mat-mdc-list-item-icon.blue {
    color: blue;
  }
  

  模板中保持原有的 [ngClass]="'blue'" 即可生效。

• 利用 CSS 自定义变量
  Angular Material v15 基于 MDC，可通过组件级的自定义变量控制图标颜色：
  静态设置：

  :host {
    --mdc-list-item-icon-color: blue;
  }
  

  动态切换的话，可在模板中绑定变量：

  <mat-icon matListItemIcon [style.--mdc-list-item-icon-color]="iconColor">home</mat-icon>
  

  组件类中定义 iconColor = 'blue' 即可。

• 直接绑定内联样式
  跳过类绑定，直接给 mat-icon 设置颜色样式：
  静态颜色：

  <mat-icon matListItemIcon [style.color]="'blue'">home</mat-icon>
  

  动态控制用 ngStyle：

  <mat-icon matListItemIcon [ngStyle]="{ color: isActive ? 'blue' : 'gray' }">home</mat-icon>
  

• 修改组件样式封装策略
  在组件元数据中关闭样式封装，让组件内的样式全局生效（注意避免样式冲突）：

  @Component({
    selector: 'app-your-list',
    templateUrl: './your-list.component.html',
    styleUrls: ['./your-list.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  

  然后在样式文件中直接写：

  .mat-mdc-list-item-icon.blue {
    color: blue;
  }
  

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