如何在Angular中使用自定义图标字体？能否继续使用mat-icon组件？

当然可以继续使用mat-icon组件，Angular Material原生支持自定义字体图标，以下是完整的集成步骤：

一、导入自定义字体文件 #

• 将icomoon导出的字体文件（通常包含.eot、.woff、.woff2、.ttf、.svg格式）放入项目的src/assets/fonts目录（无此目录则新建）。
• 在全局样式文件（如src/styles.scss或src/styles.css）中添加字体声明：

@font-face {
  font-family: 'CustomBrandIcons'; /* 自定义字体名称，后续配置要用到 */
  src: url('./assets/fonts/icomoon.eot');
  src: url('./assets/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
       url('./assets/fonts/icomoon.woff2') format('woff2'),
       url('./assets/fonts/icomoon.woff') format('woff'),
       url('./assets/fonts/icomoon.ttf') format('truetype'),
       url('./assets/fonts/icomoon.svg#CustomBrandIcons') format('svg');
  font-weight: normal;
  font-style: normal;
}

注意：路径和文件名需与实际存放的字体文件一致。

二、配置Angular Material支持自定义图标 #

1. 创建或修改Material图标配置模块（如src/app/material-icons.module.ts）：

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

@NgModule({
  exports: [MatIconModule]
})
export class MaterialIconsModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    // 注册自定义字体集：第一个参数是@font-face中的font-family，第二个是自定义CSS类名
    iconRegistry.registerFontClassAlias('CustomBrandIcons', 'custom-icon');
  }
}

2. 在全局样式文件中添加图标样式：

.custom-icon {
  font-family: 'CustomBrandIcons' !important;
  font-size: inherit;
  line-height: inherit;
}

三、在组件中使用自定义图标 #

直接通过mat-icon组件的fontSet和fontIcon属性调用：

<!-- 替换为icomoon生成的图标类名，比如icon-user -->
<mat-icon fontSet="custom-icon" fontIcon="icon-user"></mat-icon>

简化使用技巧 #

若想省略每次写fontSet，可在配置模块中设置默认字体集：

// 在MaterialIconsModule的构造函数中添加
iconRegistry.setDefaultFontSetClass('custom-icon');

之后使用时只需写：

<mat-icon fontIcon="icon-user"></mat-icon>

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