Angular Material 2 - "Error retrieving icon: undefined"

user_4746094 0
Viewed 12282

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
      • ...
    • ...
angular-material2 angular
4 Answers

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'))
}
user_67827070

I am doing following to display svgIcons in my project:

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

  2. 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>
user_77514750

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.

user_52248580
Related