这问题我之前踩过好几次坑，Angular Material的mat-icon因为组件封装和样式优先级的问题，经常会出现自定义样式或主题颜色不生效的情况，咱们一步步来解决：

1. 先搞清楚color="primary"为什么没生效 #

既然你的按钮用类似方式能正常生效，说明主题配置大概率是没问题的，那可能是这两个原因：

• mat-icon的color属性依赖组件上下文：如果你的mat-icon不是嵌套在Angular Material的组件（比如mat-button、mat-toolbar）内部，单独使用时可能需要手动添加主题类来触发颜色生效。试试给mat-icon加上mat-primary类：

  <mat-icon class="mat-primary" svgIcon="back"></mat-icon>
  

• 模块导入不完整：再确认下你的模块里有没有正确导入MatIconModule，这个是基础但容易忘的点。

2. 自定义.white类不生效的核心原因：视图封装 #

Angular默认的视图封装机制会给组件内的样式添加独特的属性前缀，导致你写的.white类无法穿透到mat-icon内部的<svg>元素（毕竟mat-icon最终渲染是外层mat-icon标签包裹着svg）。这里给你几个靠谱的解决方案：

方案一：用全局样式文件（最推荐） #

把样式写到项目根目录的styles.scss（或styles.css）里，全局样式不受视图封装限制，直接覆盖：

.white mat-icon svg {
  fill: white;
}

或者更简洁一点，直接给mat-icon设置color（因为mat-icon的color会继承到svg的fill）：

.white {
  color: white;
}

方案二：使用深度选择器（快速临时解决） #

如果不想改全局样式，在组件的样式文件里用::ng-deep穿透视图封装：

::ng-deep .white {
  color: white;
}

⚠️ 注意：Angular官方虽然不推荐长期依赖::ng-deep，但作为临时解决方法很管用，后续可以慢慢迁移到更规范的方式。

方案三：检查样式优先级 #

打开浏览器开发者工具（F12），选中mat-icon元素，看看有没有其他样式规则（比如父元素的color或者第三方样式）用!important强制覆盖了你的设置。如果有，要么调整选择器的优先级（比如用.parent-container .white这种更具体的选择器），要么针对性地覆盖：

.white {
  color: white !important;
}

3. 额外排查点 #

• 确认你的svg图标本身有没有硬编码的fill颜色：如果svg文件里已经写死了fill="#xxx"，那外部样式可能覆盖不了，需要修改svg文件去掉硬编码的fill属性。

按上面的步骤试下来，应该就能解决你的问题了！

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