自定义Material2 SVG图标注册失败，已有图标可用，求排查原因

我来帮你梳理下几个可能导致这个问题的常见原因，毕竟我也碰到过类似的情况😉

• SVG文件路径是否正确
  先确认assets/images/play-button.svg这个路径完全匹配你的项目结构。比如检查：

  • 是不是把assets的层级写错了（比如实际是src/assets/images但你漏了src？不过Angular默认会把assets作为根路径）
  • 文件名的大小写是否和实际文件一致（比如实际是Play-Button.svg但你写的是小写）
    最简单的验证方法是在浏览器地址栏直接输入http://localhost:4200/assets/images/play-button.svg，如果打不开，那肯定是路径问题。

• SVG文件本身格式是否符合要求
  Material Icons对SVG有一些隐性要求：

  • 根<svg>元素必须包含viewBox属性（比如viewBox="0 0 24 24"），这决定了图标的缩放比例
  • 尽量不要给SVG设置固定的width和height，或者设置为100%，这样才能自适应mat-icon的大小
  • 可以直接用浏览器打开这个SVG文件，看看能不能正常显示，如果打开都有问题，那就是文件本身的问题了

• Angular资源配置是否正确
  检查angular.json里的assets配置项，确保你的SVG所在的文件夹被包含在打包资源里。默认配置一般是这样的：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

  如果你的配置里只指定了特定文件，没包含整个src/assets，那这个SVG可能没被打包到构建产物里，自然无法加载。

• 注册时机与全局注册尝试
  虽然你在构造函数里的日志已经触发，但可以试试把注册代码移到ngOnInit方法里，或者换个更全局的位置（比如AppComponent）注册，避免组件加载顺序带来的潜在问题：

  ngOnInit(): void {
    this.iconRegistry.addSvgIcon('play_button', this.sanitizer.bypassSecurityTrustResourceUrl('assets/images/play-button.svg'));
  }
  

  （不过你现有图标正常，MatIconModule应该是已经正确导入了，这个可以不用额外检查）

• 浏览器缓存问题
  有时候浏览器会缓存旧的资源，导致新的SVG没有被加载。试试清空浏览器缓存，或者用Ctrl+F5强制刷新页面，看看是不是这个小问题导致的。

你可以按照上面的顺序逐个排查，应该能快速定位到问题~

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