CODEWITHSUNDEEP
angularangular-material2
Bielik
Bielik

Reputation: 992

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

Upvotes: 9

Views: 16523

Answers (4)

Daniela Donna
Daniela Donna

Reputation: 270

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.

Upvotes: 0

Vikram Jain
Vikram Jain

Reputation: 366

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>

Upvotes: 1

Tooccooo
Tooccooo

Reputation: 31

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.

Upvotes: 3

Edric
Edric

Reputation: 26740

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

Upvotes: 0

Related Questions