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

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

Solution 2

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

Solution 3

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>  

Comments

[Bielik]

Thank you for your reply. As stated in question I have tried all sorts of different paths. Yes I do have an assets folder and it is the destination I had in mind when I started. And yes I have "assets" added to "assets" array in angular-cli.json. Still it doesn't work.

[Edric]

Sorry, but did you make sure that you have the SVG icon in your assets folder?

[Bielik]

Yeah, I did, I even restarted the whole project. I know why you may think this is the issue but I don't even remember how many different paths I tried and as you can see in this GitHub issue I am not the only one struggling with it. I assume it must be something with CLI configuration, or path has some weird origin that I haven't tried yet.

[Bielik]

Thank you for your answer, but no. Project is rather standard, no node, nor interceptor at the time.

[Tooccooo]

I use a standard project generated by Angular Cli 1.7.1 to test the svg icon and it is worked. For Angular Cli that uses webpack to bundle the whole project, Angular Cli ('ng server') will pack all the bundled files and assets to directory './dist' and then server this directory. So the url in "sanitizer.bypassSecurityTrustResourceUrl()" should be the path refer to the server's root directory rather than the project's root directory. I have tried to put the 'thumbup-icon.svg' to './src/app', Angular Cli won't pack it to './dist'.

[Tooccooo]

While Angular Cli has been configured defaultly to copy the './src/assets' directory to './dist', so make sure you are using the url 'assets/thumbup-icon.svg' if you put the 'thumbup-icon.svg' to './src/assets' .

[Ante Ereš]

and how to add mat icon in component if I set a base-url interceptor?