如何通过含symbol的单个SVG文件注册Mat-Icons自定义图标？

这里是调整后的完整代码，完美适配你将所有图标整合到my-icons.svg的需求，每个图标key会对应文件里<symbol>的id：

import { Injectable } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
// 记得替换成你实际的Icons枚举路径
import { Icons } from './your-icons-enum-path';

@Injectable({
  providedIn: 'root'
})
export class IconService {
 constructor(
  private matIconRegistry: MatIconRegistry,
  private domSanitizer: DomSanitizer
 ) {}

 public registerIcons(): void {
  // 路径依然指向存放图标文件的目录，和原有逻辑保持一致
  this.loadIcons(Object.values(Icons), '../assets/icons');
 }

 private loadIcons(iconKeys: string[], iconDirUrl: string): void {
  iconKeys.forEach((key) => {
   this.matIconRegistry.addSvgIcon(
    key,
    this.domSanitizer.bypassSecurityTrustResourceUrl(
     // 拼接单个SVG文件路径+锚点，锚点对应symbol的id
     `${iconDirUrl}/my-icons.svg#${key}`
    )
   );
  });
 }
}

关键改动说明： #

• 核心调整了资源URL的拼接逻辑：不再逐个加载${key}.svg单文件，而是统一指向my-icons.svg，通过#${key}锚点关联到文件内对应的<symbol id="${key}">元素
• 把参数名从iconUrl改成了iconDirUrl，让语义更清晰——现在它指向的是存放my-icons.svg的目录，而非单个图标文件的路径（属于可读性优化，可选保留原参数名）
• 原有调用逻辑完全保留，你不需要修改任何组件里的图标使用方式，依然可以像之前那样通过key引用对应图标

这样修改后，Angular Material的图标系统会自动从my-icons.svg中加载对应的symbol元素，实现单文件多图标的批量加载，减少HTTP请求次数的同时也更便于图标资源的管理。

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