如何使用自定义 .png-Images 而不是 mat-icons 作为按钮？答案

【问题标题】：How to use custom .png-Images instead of mat-icons for a button?如何使用自定义 .png-Images 而不是 mat-icons 作为按钮？
【发布时间】：2021-11-13 15:08:16
【问题描述】：

我在 Angular 应用程序中实现了两个按钮，用户可以使用它们更改显示的语言。现在，我想使用两个带有相应国家标志的图标，而不是带有“德语”和“英语”的两个按钮。首先我尝试使用“Mat-Icons”，不幸的是没有适合我的用例的图标。因此，我从 Flaticon 下载了两个带有各自国家标志的 .png 文件，将它们保存在 /assets/icons 中，现在想整合这些而不是 mat 图标。不幸的是，我根本无法让它工作，因此希望得到一些帮助 - 谢谢！

<button mat-raised-button (click)="useLanguage('de')">German</button> 

<button mat-button (click)="useLanguage('de')"><mat-icon>...</mat-icon></button>

【问题讨论】：

目前有什么问题？
代码显示了有效的实现。但我想使用我自己的自定义 .png 文件作为图标而不是文本（第 1 行）或垫子图标（第 2 行）。这就是我不知道如何处理的问题。这两行代码只是为了说明，展示我已经开始的内容。

标签： html angular icons

【解决方案1】：

工作 stackblitz 示例here

以这种方式使用您的图像

<button class="icon-button" (click)="useLanguage('de')">
  <img
    class="icon"
    src="assets/your-path-to-icon"
  />
</button>

以及全局样式中的这些自定义样式 -

.icon-button{
  background: none;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.icon-button .icon {
  width: 28px;
}

【讨论】：