如何使用自定义 .png-Images 而不是按钮的 mat-icons？

Question

我在 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>
                                

Answer 1

工作 stackblitz 示例在这里

以这种方式使用你的图像

<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;
}