带有PNG文件的AngularJS材质图标-Java 学习之路

我刚刚开始关注Angular团队的Material项目 . 在过去的两天里，我试图让Icon指令（https://material.angularjs.org/#/api/material.components.icon/directive/mdIcon）至少使用PNG文件，但是我可以't get it to work... Yes, I'已经阅读了文档，那里仍然希望有一个技巧可用 . 那么：有没有办法将AngularJS Material Icon指令与任何PNG图像一起使用？

在此先感谢您的帮助！

安德烈

2 回答

4
我的徽标呈圆形，所以当我使用 <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%;
 }
```
回复于 2024-04-29T11:10:15+08:00

而不是使用 <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中得到渲染 .

回复于 2024-04-29T11:10:15+08:00

带有PNG文件的AngularJS材质图标

2 回答

相关问题