Question

我现在和AngularJS合作了一段时间，但我刚刚开始关注Angular团队的Material项目。在过去的两天里，我试图让Icon指令（https://material.angularjs.org/#/api/material.components.icon/directive/mdIcon）至少使用PNG文件，但是我无法让它工作...... 是的，我已阅读文档并且没有提及PNG，该指令似乎仅适用于SVG和CSS图标，但我仍然希望有一个技巧可用。那么：有没有办法将AngularJS Material Icon指令与任何PNG图像一起使用？

提前感谢您的帮助！

安德烈

Answer 1

我的徽标是圆形，所以当我使用<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>

我用这个css创建了自定义按钮大小：

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

然后确保我的图像填充空间：

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

Answer 2

不使用<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中呈现。

带有PNG文件的AngularJS材质图标

2 个答案: