使用MatIconRegistry的addSvgIconSetInNamespace无法显示Mat Icon

问题核心在于你的SVG图标集结构不符合MatIconRegistry的要求：addSvgIconSetInNamespace方法只识别SVG根元素下的<symbol>元素作为独立图标，但你提供的文件里，除了menu是<symbol>，其余图标都是嵌套的<svg>标签，这就是批量注册后无法显示的原因。

修复步骤 #

1. 修改SVG文件结构：将所有嵌套的<svg>标签替换为<symbol>标签，保留每个图标的id、尺寸、viewBox等属性。修改后的SVG内容如下：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <symbol id="arrow-left" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></symbol>
    <symbol id="user-check" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-check"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></symbol>
    <symbol id="sun" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></symbol>
    <symbol id="sunrise" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sunrise"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="2" x2="12" y2="9"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="8 6 12 2 16 6"></polyline></symbol>
    <symbol id="moon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></symbol>
    <symbol id="menu" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></symbol>
</svg>

2. 确认注册代码无误：确保IconsModule中的注册逻辑正确，示例代码如下：

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

@NgModule({
  imports: [MatIconModule],
  exports: [MatIconModule]
})
export class IconsModule {
  constructor(
    private iconRegistry: MatIconRegistry,
    private sanitizer: DomSanitizer
  ) {
    // 注册图标集到feather命名空间
    iconRegistry.addSvgIconSetInNamespace(
      'feather',
      sanitizer.bypassSecurityTrustResourceUrl('assets/feather-icons.svg') // 替换为你的SVG文件实际路径
    );
  }
}

3. 组件使用验证：HTML中继续使用原有调用方式即可：

<mat-icon class="text-black" svgIcon="feather:menu"></mat-icon>
<mat-icon class="text-black" svgIcon="feather:arrow-left"></mat-icon>

关键说明 #

MatIconRegistry解析图标集时，会遍历SVG根元素下的所有<symbol>元素，通过id匹配你指定的图标名称。嵌套的<svg>元素不会被识别为可调用的独立图标，这也是单独注册单个SVG文件能正常工作的原因——单个SVG本身就是完整的图标内容，而图标集需要统一用<symbol>组织多个图标。

内容的提问来源于stack exchange，提问作者Isaías Orozco Toledo