Angular Material 2 - "Error retrieving icon: undefined"

Question

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
    • ...
  • ...

Answer 1

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.

Answer 2

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>