Components: md-icon svgSrc dont work

[SvenBudak]

I installed fresh,the latest Version of Material2.

md-icon: <md-icon svgSrc="img/icons/social/facebook.svg"></md-icon>

dont give out any icon. In Material1 it include the svg code in the html template. But for me in new Material absolutly nothing happens. I dont get any error to.

[fxck]

https://github.com/angular/material2/blob/master/CHANGELOG.md#breaking-changes-from-alpha11

The svgSrc propert of has been removed. All SVG URLs must now be explicitly marked as trusted using Angular's DomSanitizer service.

[SvenBudak]

Thanks! But this is so new that i find absolutly no guide how to use icons with DomSanitizer... I am realy bad with JavaScript. :)

[czeckd]

@BamiGorengo You will need to add the icons explicitly in the icon registry. For an example, look at the src/demo-app/icon/icon-demo.ts, specifically the constructor:

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

The "thumb-up" icon is then usable as is show in the src/demo-app/icon/icon-demo.html

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

[SvenBudak]

hmmm sounds cool. is there allready a version of material icon in that format?

[armno]

If I have many icons in my app (50+), should I register each icon explicitly or is there a better approach for this? I was thinking about using icon sets but not sure if it will be easy to maintain different icons (got from the designers) in a single SVG file myself.

[SvenBudak]

I hope that it is possible to import a Material-Icon Component and pass the names into all modules. That its easy to include them with (md) is a random suffix. Maybe Team Material2 is so ultra Fresh, that they impement it soon ;D

[medeirosrich]

I would also like to know if there is a way to register all icons globally

[EladBezalel]

Closing as i think this has been answered if you still have some questions please comment and i will reopen

[medeirosrich]

@EladBezalel
Would still love to see an example or documentation on how to Register all icons at once for use app wide with any component. Instead of repeating the registration in the constructor of each component.

[EladBezalel]

@medeirosrich can you open a new issue for that?

[SvenBudak]

Please link the new issue here then, after opening it.

[CanKattwinkel]

Readme needs update:

https://github.com/angular/material2/blob/master/src/lib/icon/README.md

[Splaktar]

@CanKattwinkel Elad just opened a PR to fix the docs.

[mcblum]

Just finding this issue after trying to figure out how to set the default icon set provider in Angular Material for Angular 2+. Can I give it a file with all of the SVG definitions like I could in Angular Material 1?

[kxlow]

@mcblum Yes, you can. In fact, there's a tutorial to do just that on materialdesignicons.com (https://materialdesignicons.com/getting-started, scroll down to the Angular 2.x/4.x section).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}