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.