Angular Material 2 - “Error retrieving icon: undefined”

问题

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.

In my AppComponent:

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

Template:

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

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

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.

Structure

src
- app
  - app.component.ts
  - // I have tried putting SVG here
  - ...
- assets
  - // I have also tried putting SVG here
  - ...
- ...

回答1:

Do you have an assets folder? If you have, then place your svg file in the folder, then access it by using the assets path:

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

回答2:

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.

回答3:

I am doing following to display svgIcons in my project:

Copied thumb-up icons in assets folder (assets/icons/thumb-up.svg).

In my app.component.ts I added following code:

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

To use this icon anywhere in project:

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

回答4:

I registered all my icons inside IconRegistryModule and I imported this module in app.module.ts. To fix the warning message "Error retrieving icon", I imported IconRegistryModule also in the spec file.

来源：https://stackoverflow.com/questions/46342005/angular-material-2-error-retrieving-icon-undefined

标签

angular

angular-material2