使用mat-icon加载SVG时fill属性无法覆盖的问题求助

我太懂这种自带硬编码fill属性的SVG搞崩样式的痛苦了！别慌，给你几个实用的解决方案，按优先级推荐：

方案1：直接修改SVG源文件（最稳妥） #

问题根源就是SVG里的fill="#000000"硬写死了颜色，浏览器会优先使用这个内联属性，哪怕你加!important都不一定能覆盖。最简单的办法就是打开你的ic_clear_black_24px.svg文件，找到里面的路径（path）或者图形元素，把fill="#000000"删掉，或者替换成fill="currentColor"。

举个修改后的SVG片段例子：

<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>

修改完之后，你原来的CSS就能正常生效了：

.auth--icon mat-icon {
  color: red;
}

因为currentColor会继承父元素的color值，完美匹配mat-icon的使用习惯。

方案2：动态修改SVG内容（无法修改源文件时用） #

如果因为权限或者资源限制没法改SVG文件，那可以在Angular里动态获取SVG内容，替换掉硬编码的fill属性，再注册到图标库：

import { Component, OnInit } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  constructor(
    private _iconRegistry: MatIconRegistry,
    private _sanitizer: DomSanitizer,
    private http: HttpClient
  ) {}

  ngOnInit(): void {
    this.http.get('/assets/images/ic_clear_black_24px.svg', { responseType: 'text' })
      .subscribe(svgContent => {
        // 替换所有硬编码的黑色fill为currentColor
        const modifiedSvg = svgContent.replace(/fill="#000000"/g, 'fill="currentColor"');
        // 注册修改后的SVG字面量
        this._iconRegistry.addSvgIconLiteral(
          'close',
          this._sanitizer.bypassSecurityTrustHtml(modifiedSvg)
        );
      });
  }
}

这个方法会在组件初始化时请求SVG文件，替换内容后再注册，这样加载的图标就会响应CSS的color设置了。

方案3：强制覆盖内部元素样式（不推荐） #

如果前两种方法都没法用，你可以试试直接针对SVG内部的path元素写样式，但要注意Angular的视图封装可能会影响生效，而且这种方式不够优雅：

.auth--icon mat-icon svg path {
  fill: red !important;
}

如果你的组件开启了视图封装，可能需要用:host ::ng-deep来穿透（不过::ng-deep已经被标记为废弃，谨慎使用）：

:host ::ng-deep .auth--icon mat-icon svg path {
  fill: red !important;
}

总之，优先选方案1，最直接也最符合最佳实践；方案2是灵活的替代方案；方案3只能作为最后的兜底。

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