Angular中使用MatIconRegistry自定义SVG图标遇Http请求失败错误求助

针对你遇到的Error retrieving icon :xxxx! Http failure response错误，以下是几个可行的排查和解决步骤：

• 修正SVG文件路径
  Angular的静态资源默认存放在assets目录下，你当前代码中的路径imgs/banana.svg会指向项目根目录，大概率找不到文件。如果你的imgs文件夹是assets的子目录，应该把路径改为：

  this.matIconRegistry.addSvgIcon(
      'banana',
      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/imgs/banana.svg')
  );
  

  可以直接在浏览器地址栏访问http://localhost:4200/assets/imgs/banana.svg验证文件是否能正常加载，不能的话检查文件是否真的放在对应位置。

• 确认angular.json的静态资源配置
  打开项目根目录的angular.json，检查architect.build.options.assets数组，确保SVG所在的文件夹被包含：

  "assets": [
    "src/favicon.ico",
    "src/assets"
    // 如果imgs不在assets下，需要添加"src/imgs"
  ]
  

  配置修改后需要重启ng serve才会生效。

• 检查SVG文件合法性
  若路径和配置都没问题，可能是SVG文件本身损坏或存在语法错误。用文本编辑器打开banana.svg，确认标签闭合完整、语法正确，也可以替换为一个已知正常的SVG文件测试是否能加载。

• 清理缓存重启服务
  Angular开发服务器可能缓存了旧的资源路径，执行ng serve --no-cache重启服务，同时清理浏览器缓存，避免缓存导致的路径识别问题。

• 尝试使用命名空间（可选）
  如果怀疑图标名称冲突（虽然概率极低），可以给自定义图标添加命名空间：

  this.matIconRegistry.addSvgIconInNamespace(
      'custom',
      'banana',
      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/imgs/banana.svg')
  );
  

  对应HTML中改为：

  <mat-icon svgIcon="custom:banana"></mat-icon>
  

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