Javascript 带有 PNG 文件的 AngularJS 材质图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30359398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Material Icon with PNG file
提问by AndreiC
I'm working with AngularJS for a bit now, but I've just started looking at the Materialproject 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?
我现在正在使用 AngularJS，但我刚刚开始研究Angular 团队的Material项目。在过去的 2 天里，我试图让 Icon 指令（https://material.angularjs.org/#/api/material.components.icon/directive/mdIcon）至少处理 PNG 文件，但我可以不让它工作......是的，我已经阅读了文档并且没有提到 PNG，并且该指令似乎只适用于 SVG 和 CSS 图标，但我仍然希望有一个可用的技巧。那么：有没有办法将 AngularJS Material Icon 指令与任何 PNG 图像一起使用？
Thanks in advance for any help!
在此先感谢您的帮助！
Andrei
安德烈
回答by Trevor Glass
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"></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:
我用这个 css 创建了自定义按钮大小：
.md-button.logo {
height: 7rem;
width: 7rem;
}
Then made sure my image filled the space with:
然后确保我的图像用以下内容填充空间：
.logo-image {
height: 100%;
width: 100%;
}
回答by Naisheel Verdhan
Instead of using <md-icon> </md-icon>, use
而不是使用<md-icon> </md-icon>，使用
<md-button ...>
<img class="png-icon" src="path/to/your/file.png" style="width: 24px; height: 24px;">
</md-button>
to include your png image.
包括您的 png 图像。
CSS:
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.
我在我的网站上对 png 和 svg 图标都使用了这种方法，因为我发现即使里面的 .svg 图标<md-icon>在 IE 中也根本没有被渲染。
