带有PNG文件的AngularJS材质图标

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-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 图标都使用了这种方法，因为我发现即使里面的 .svg 图标<md-icon>在 IE 中也根本没有被渲染。

Answer 2

我的徽标呈圆形,所以当我使用时,这对我来说非常有效<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%;
 }