Angular Material 2 - “检索图标时出错：未定义”答案

【问题标题】：Angular Material 2 - "Error retrieving icon: undefined"Angular Material 2 - “检索图标时出错：未定义”
【发布时间】：2018-09-25 23:23:48
【问题描述】：

我在使用 Angular Material 2 中的注册图标时遇到问题。我遵循了他们的 github repository 示例，但没有运气。

在我的 AppComponent 中：

  constructor(mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
    mdIconRegistry
      .addSvgIcon('thumb-up',
        sanitizer.bypassSecurityTrustResourceUrl('./thumbup-icon.svg'))
  }

模板：

<md-icon svgIcon="thumb-up"></md-icon>

在控制台中，我收到错误“检索图标时出错：未定义”。所以它知道它已注册并且很可能路径存在问题。我已经尝试了许多不同的路径变体，但都没有奏效。为简单起见，我们假设 SVG 文件位于 app.component.ts 旁边的 app 文件夹中

有类似的（关闭的）issue on github 也没有得到回答，所以我知道我不是唯一一个遇到这个问题的人。我正在使用 Angular CLI，我想这也可能是配置问题。

结构

源
- 应用程序
  - app.component.ts
  - // 我已经尝试将 SVG 放在这里
  - ...
- 资产
  - //我也试过把SVG放在这里
  - ...
- ...

【问题讨论】：

您使用的是angular 和material 的哪个版本？另外，您的文件夹结构中图标的路径是什么？
@Faisal 很可能是 Angular 2.x/4,x，因为使用了构造函数，而 mdIconRegistry 仅在 Angular 材料中可用。
很可能你的 svg 文件路径是错误的。
我创建了带有适当标签的问题。 “angular”指的是 angular2+，“angular-material2”指的是material.angular.io
您的实现看起来是正确的，尽管现在它是，所以只需提供正确的资产 url。将图标放在资产文件夹中，然后将 url 设置为“assets/path-to-icon/icon-name.svg”（注意没有“./”——不需要）。图标的路径不一定是 material.io 上的示例所说的那样。在我自己的库中，路径是“assets/material-design-icons/alert/svg/production/ic_error_24px.svg”。

标签： angular angular-material2

【解决方案1】：

您是否为您的 Angular 项目配置了 nodejs http 服务器（如 express）？或者为您的 Angular http 请求设置一个 base-url 拦截器？所有这些设置都会使 Angular 对“assets/thumbup-icon.svg”的 http 请求与浏览器地址栏中的“http://localhost:xxx/assets/thumbup-icon.svg”不同。检查这些设置可能会对您有所帮助。

【讨论】：

感谢您的回答，但没有。项目比较标准，当时没有节点，也没有拦截器。
我使用 Angular Cli 1.7.1 生成的标准项目来测试 svg 图标并且它可以工作。对于使用 webpack 捆绑整个项目的 Angular Cli，Angular Cli ('ng server') 会将所有捆绑的文件和资产打包到目录 './dist' 中，然后服务器此目录。所以“sanitizer.bypassSecurityTrustResourceUrl()”中的url应该是指服务器根目录而不是项目根目录的路径。我试图将“thumbup-icon.svg”放到“./src/app”，Angular Cli 不会将它打包到“./dist”。
虽然 Angular Cli 默认配置为将 './src/assets' 目录复制到 './dist'，所以请确保您使用的是 url 'assets/thumbup-icon.svg'如果你把 'thumbup-icon.svg' 放到 './src/assets' 。
如果我设置了 base-url 拦截器，如何在组件中添加 mat 图标？

【解决方案2】：

您有assets 文件夹吗？如果有，请将 svg 文件放在文件夹中，然后使用 assets 路径访问它：

constructor(mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
    mdIconRegistry
        .addSvgIcon('thumb-up', sanitizer.bypassSecurityTrustResourceUrl('./assets/thumbup-icon.svg'))
}

【讨论】：

感谢您的回复。如问题所述，我尝试了各种不同的路径。是的，我确实有一个资产文件夹，这是我开始时想到的目的地。是的，我在 angular-cli.json 的“assets”数组中添加了“assets”。还是不行。
抱歉，您确定您的assets 文件夹中有SVG 图标吗？
是的，我做到了，我什至重新启动了整个项目。我知道为什么您可能认为这是问题所在，但我什至不记得我尝试了多少不同的路径，正如您在这个 GitHub 问题中看到的那样，我并不是唯一一个为此苦苦挣扎的人。我认为它一定是 CLI 配置的东西，或者路径有一些我还没有尝试过的奇怪来源。

【解决方案3】：

我正在执行以下操作以在我的项目中显示 svgIcons：

在资产文件夹 (assets/icons/thumb-up.svg) 中复制了大拇指图标。

在我的 app.component.ts 我添加了以下代码：

      constructor(
      private _iconRegistry: MatIconRegistry,
      private _domSanitizer: DomSanitizer) { 
          this._iconRegistry.addSvgIconInNamespace('assets', 'thumbUp', 
          this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/support.svg'));
      }

要在项目的任何地方使用此图标：

          <mat-icon svgIcon="assets:thumbUp"></mat-icon>

【讨论】：

【解决方案4】：

我在 IconRegistryModule 中注册了所有图标，并将此模块导入 app.module.ts。为了修复警告消息“检索图标时出错”，我还在规范文件中导入了 IconRegistryModule。

【讨论】：