在Angular中如何使用自定义.png图片替代mat-icons作为按钮图标？

方案1：直接内嵌img标签（最简便） #

无需额外依赖配置，直接将图片标签嵌入按钮内部即可，只要确保资源路径配置正确就能生效：

<!-- 纯图标德语按钮 -->
<button mat-raised-button (click)="useLanguage('de')">
  <img 
    src="/assets/icons/germany.png" 
    alt="德语" 
    style="width: 20px; height: 20px; vertical-align: middle;"
  >
</button>

<!-- 纯图标英语按钮 -->
<button mat-raised-button (click)="useLanguage('en')">
  <img 
    src="/assets/icons/uk.png" 
    alt="英语" 
    style="width: 20px; height: 20px; vertical-align: middle;"
  >
</button>

注意：如果图片加载404，先检查angular.json中projects -> 你的项目名 -> architect -> build -> options -> assets配置项，确认包含"src/assets"，保证打包时assets目录资源会被正常输出到构建产物中。

方案2：注册为自定义Mat图标（风格更统一） #

如果要保持和其他Mat图标一致的使用规范，可以将PNG图片注册为自定义Mat图标使用：

1. 组件TS中注册图标：

import { Component } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-language-switch',
  templateUrl: './language-switch.component.html'
})
export class LanguageSwitchComponent {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    // 注册国旗图标
    this.matIconRegistry.addIcon(
      'de-flag',
      this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/germany.png')
    );
    this.matIconRegistry.addIcon(
      'en-flag',
      this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/uk.png')
    );
  }

  useLanguage(lang: string) {
    // 保留原有语言切换逻辑
  }
}

2. 模板中使用：

<button mat-button (click)="useLanguage('de')">
  <mat-icon svgIcon="de-flag"></mat-icon>
</button>
<button mat-button (click)="useLanguage('en')">
  <mat-icon svgIcon="en-flag"></mat-icon>
</button>

3. 可通过CSS统一调整图标尺寸：

mat-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

内容的提问来源于stack exchange，提问作者sarius