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 (ponents.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

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

• javascript
• angularjs
• angular-material

2 Answers 2

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.

My logo is in the shape of a circle so this worked perfectly for me when I used the <md-button class="md-icon-button"></md-button>.

<md-button class="md-icon-button logo">
  <img class="logo-image" src="path/to/your/file.png">
</md-button>

I created the custom button size with this css:

 .md-button.logo {
   height: 7rem;
   width: 7rem;
 }

Then made sure my image filled the space with:

 .logo-image {
   height: 100%;
   width: 100%;
 }