Question

我在使用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，我猜它也可能是配置问题。

结构

SRC
- 应用
  - app.component.ts
  - //我试过把SVG放在这里
  - ...
- 资产
  - //我也试过把SVG放在这里
  - ...
- ...

Answer 1

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

Answer 2

你有一个std::endl文件夹吗？如果有，请将svg文件放在该文件夹中，然后使用assets路径访问它：

assets

Answer 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>

Answer 4

我遇到了同样的问题，“错误检索图标：未定义” Tooccooo的答案使我想起我在应用程序上应用了拦截器，因此请转到您的网络并寻找svg图标请求，检查url请求并确认是否这是正确的。谢谢Tooccoo

Answer 5

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

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

结构

5 个答案: