javascript - 带有PNG文件的AngularJS素材图标

Question

我现在使用 AngularJS 有一段时间了，但我才刚刚开始研究 Material来自 Angular 团队的项目。在过去的两天里，我试图让图标指令( https://material.angularjs.org/#/api/material.components.icon/directive/mdIcon )至少与 PNG 文件一起工作，但我无法让它工作...... 是的，我已经阅读了文档并且没有提到 PNG 并且该指令似乎只适用于 SVG 和 CSS 图标，但我仍然希望有一个可用的技巧。 那么:有什么方法可以对任何 PNG 图像使用 AngularJS Material Icon 指令吗？

在此先感谢您的帮助!

安德烈

Answer 1

而不是使用 <md-icon> </md-icon> , 使用

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

包含您的 png 图像。

CSS:

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

我在我的网站上对 png 和 svg 图标都使用了这种方法，因为我发现即使是 <md-icon> 中的 .svg 图标也是如此。根本不会在 IE 中呈现。