Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

md-icon svgSrc dont work

See original GitHub issue

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.

Issue Analytics

State:
Created 7 years ago
Comments:16 (4 by maintainers)

Top GitHub Comments

5reactions

czeckdcommented, Jan 5, 2017

@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>

1reaction

medeirosrichcommented, Jan 11, 2017

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

Top Results From Across the Web

Using Md-icon, I can't display the custom svg - Stack Overflow

Try md-svg-src instead of md-svg-icon. md-svg-src : String URL (or expression) used to load, cache, and display an external SVG. You can see...

Directives > mdIcon - AngularJS Material

The directive supports both icon fonts and SVG icons. Icons should be considered view-only elements that should not be used directly as buttons;...

How to use <md-icon> in Angular Material? - SyntaxFix

I was wondering how to use Material's icons, as this is not working: ... <md-icon md-svg-src = '/static/img/android.svg'></md-icon>. or. <md-icon md-svg-src ...

angular/material2 - Gitter

I am using the material-expansion panel from: dart-lang/angular2_components. I wanted to be able to change the color of the title div from white...

Load Svg Icons From Url - CodePen

<md-icon ng-switch-when="true" md-svg-src="img/icons/cake.svg" class="s24" alt="Cake"></md-icon><br/>. 13. <md-icon ng-switch-when="false" ...