角度材料2-“错误检索图标:未定义". [英] Angular Material 2 - "Error retrieving icon: undefined"

问题描述

我在Angular Material 2中使用注册图标时遇到问题，我遵循了他们的

I am having a problem using a registered icon in Angular Material 2. I have followed the example of their github repository but without luck.

在我的AppComponent中:

In my 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文件夹中.

In the console, I am getting error "Error retrieving icon: undefined". So it knows it is registered and most likely there is a problem with the path. I have already tried many different variations of the path and none has worked. For the simplicity, let's assume that SVG file is in the app folder alongside app.component.ts

在github上有类似的(关闭)问题也没有得到回答，所以我知道我不是唯一遇到此问题的人.我正在使用Angular CLI，我想这也可能是配置问题.

There is similar (closed) issue on github that is also not answered so I know I am not the only one having this issue. I am using Angular CLI and I guess that it also may be a problem with configuration.

• src
  • 应用
    • app.component.ts
    • //我已经尝试过将SVG放在这里
    • ...
    • src
      • app
        • app.component.ts
        • // I have tried putting SVG here
        • ...
        • //我也尝试过将SVG放在这里
        • ...

        推荐答案

        您是否已为Angular项目配置了nodejs http服务器(如express)?或者为您的Angular http请求设置基本URL拦截器?所有这些设置将使Angular对"assets/thumbup-icon.svg"的http请求不同于" http://localhost:xxx/assets/thumbup-icon.svg ".选中这些设置可能会对您有所帮助.

        Have you config a nodejs http server (like express) for your Angular project ? Or set a base-url interceptor for your Angular http request ? All these setting will make the Angular's http request to 'assets/thumbup-icon.svg' be different from "http://localhost:xxx/assets/thumbup-icon.svg" in browser's address bar. Check these setting may help you.

        这篇关于角度材料2-“错误检索图标:未定义".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！