AngularJS Material Icon with PNG file

Question

I'm working with AngularJS for a bit now, but I've just started looking at the Material project from the Angular team. For the last 2 days I'm trying to get the Icon directive (https://material.angularjs.org/#/api/material.components.icon/directive/mdIcon) to work with at least PNG files, but I can't get it to work... Yes, I've read the documentation and there's no mentioning of PNGs and the directive seems to work only with SVG and CSS icons, but I'm still hoping that there's a trick available. So: is there any way to use the AngularJS Material Icon directive with any PNG images?

Thanks in advance for any help!

Andrei

Answer 1

Instead of using <md-icon> </md-icon>, use

<md-button ...>
   <img class="png-icon" src="path/to/your/file.png" style="width: 24px; height: 24px;">
</md-button>

to include your png image.

CSS:

.png-icon{
    margin: 5px auto auto;
    padding: 0;
    display: inline-block;
    background-repeat: no-repeat no-repeat;
    pointer-events: none;
}

I have used this method on my website for both png and svg icons because I found that even the .svg icons inside <md-icon> were not getting rendered at all in IE.