Angular Material中<mat-icon>的SVG图标颜色修改及hover失效问题求助

嘿，这个问题我之前在项目里也碰到过，Angular Material的<mat-icon>组件渲染SVG图标时，样式作用范围和普通元素不一样，直接给类加hover样式会被组件内部的默认样式覆盖，所以才没效果。下面给你几个可行的解决方案：

方案1：使用::ng-deep穿透组件样式 #

Angular组件样式默认是封装状态，外部样式没法影响组件内部的DOM元素（比如mat-icon里的<svg>标签）。用::ng-deep能打破这种封装，让你的hover样式作用到内部的SVG上：

.color:hover::ng-deep svg {
  fill: black;
  /* 若有需要也可设置color，但fill才是控制SVG图标的核心属性 */
}

这个方法简单直接，也是目前处理Angular Material组件样式穿透最常用的方式。

方案2：修改组件的ViewEncapsulation #

如果你不想用::ng-deep，可以关闭当前组件的样式封装，让CSS全局生效：

首先在组件的ts文件里修改装饰器：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭样式封装
})
export class YourComponentComponent {
  // ...
}

然后在CSS里直接写：

.color:hover svg {
  fill: black;
}

⚠️ 注意：关闭样式封装后，当前组件的CSS会变成全局样式，可能影响其他组件的样式，使用时最好给样式加上更具体的选择器。

方案3：修改SVG文件的fill属性为currentColor（推荐） #

这是最优雅的解决方案，从根源上解决问题。打开你的SVG图标文件，把里面所有path的fill属性改成currentColor，比如：

原SVG代码可能是：

<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="#fff"/>

改成：

<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/>

这样SVG的颜色会继承父元素（也就是<mat-icon>）的color属性，之后你只需要修改mat-icon的color即可，不需要操作fill：

.color:hover {
  color: black;
}

这个方法既简洁又不会有样式穿透的问题，非常推荐。

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