如何覆盖mat-icon的默认同名图标（以cloud_upload为例）

看起来你遇到的场景很典型——用了第三方库的mat-icon，但需要在特定应用里替换某个默认图标，又不想改库代码对吧？我之前也碰到过类似需求，分享几个可行的方案给你：

方案一：用Angular指令拦截替换（推荐） #

这个方法最优雅，完全在应用层处理，不侵入库代码：

1. 先把你的自定义SVG图标注册到MatIconRegistry里：

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CustomIconService {
  constructor(private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
    // 注册你的自定义cloud_upload SVG，替换成你实际的文件路径
    this.iconRegistry.addSvgIcon(
      'custom_cloud_upload',
      this.sanitizer.bypassSecurityTrustResourceUrl('./assets/icons/custom-cloud-upload.svg')
    );
  }
}

（这里给自定义图标起了个不同的名字，避免和默认名称混淆，当然也可以用同名，不过分开更清晰）

2. 然后创建一个指令，专门匹配使用cloud_upload字体图标的mat-icon元素，把它改成用我们的自定义SVG：

import { Directive, OnInit } from '@angular/core';
import { MatIcon } from '@angular/material/icon';

@Directive({
  selector: 'mat-icon[fontIcon="cloud_upload"], mat-icon:not([fontIcon]):not([svgIcon])'
})
export class ReplaceCloudUploadIconDirective implements OnInit {
  constructor(private matIcon: MatIcon) {}

  ngOnInit(): void {
    // 检查当前mat-icon是否显示的是默认的cloud_upload
    if (this.matIcon._elementRef.nativeElement.textContent.trim() === 'cloud_upload') {
      // 清空字体图标内容，设置为我们的自定义SVG图标
      this.matIcon._elementRef.nativeElement.textContent = '';
      this.matIcon.svgIcon = 'custom_cloud_upload';
    }
  }
}

这里的选择器覆盖了两种场景：一种是明确写了fontIcon="cloud_upload"的，另一种是像<mat-icon>cloud_upload</mat-icon>这种直接写内容的情况，确保所有库中的使用场景都能被替换。

3. 最后在你的AppModule里声明这个指令，或者在SharedModule里导出，确保能作用到整个应用：

import { NgModule } from '@angular/core';
import { ReplaceCloudUploadIconDirective } from './replace-cloud-upload-icon.directive';

@NgModule({
  declarations: [ReplaceCloudUploadIconDirective],
  exports: [ReplaceCloudUploadIconDirective]
})
export class CustomIconsModule {}

这样一来，所有库中用到<mat-icon>cloud_upload</mat-icon>的地方，都会自动替换成你的自定义SVG图标，其他图标不受影响。

方案二：直接扩展MatIconRegistry逻辑 #

如果你想更彻底一点，可以扩展MatIconRegistry，让它在遇到cloud_upload时优先返回你的自定义SVG：

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CustomMatIconRegistry extends MatIconRegistry {
  constructor(sanitizer: DomSanitizer) {
    super(sanitizer);
    // 提前注册自定义图标
    this.addSvgIcon(
      'cloud_upload',
      sanitizer.bypassSecurityTrustResourceUrl('./assets/icons/custom-cloud-upload.svg')
    );
  }

  // 重写获取命名图标的方法，优先返回自定义SVG
  override getNamedIcon(iconName: string, namespace?: string) {
    if (iconName === 'cloud_upload' && !namespace) {
      return this.getSvgIcon(iconName, namespace);
    }
    return super.getNamedIcon(iconName, namespace);
  }
}

然后在AppModule里替换默认的MatIconRegistry：

import { NgModule } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { CustomMatIconRegistry } from './custom-mat-icon-registry';

@NgModule({
  providers: [
    { provide: MatIconRegistry, useClass: CustomMatIconRegistry }
  ]
})
export class AppModule {}

这个方法不用写指令，直接修改图标注册表的逻辑，但需要注意Angular Material版本的兼容性，因为重写框架类的方法可能会在版本更新时失效。

方案三：CSS hack（应急用） #

如果上面两种方法都不适用，还可以用CSS来临时替换：

/* 隐藏默认的字体图标 */
mat-icon:has(text:contains("cloud_upload")) {
  font-family: unset !important;
}

/* 用背景图替换 */
mat-icon:has(text:contains("cloud_upload"))::before {
  content: "";
  display: inline-block;
  width: 24px; /* 匹配你的图标尺寸 */
  height: 24px;
  background-image: url('./assets/icons/custom-cloud-upload.svg');
  background-size: cover;
}

/* 隐藏原来的文字内容 */
mat-icon:has(text:contains("cloud_upload")) text {
  display: none;
}

不过这个方法依赖:has选择器，兼容性不如前两种，而且不够灵活，只适合应急场景。

备注：内容来源于stack exchange，提问作者Christof Aenderl