Angular 15中mat-icon与Google字体图标样式不符问题咨询

问题原因 #

你遇到的样式差异核心原因是字体集不匹配：

• mat-icon组件默认使用Material Icons（实心样式）字体，而你在Google字体图标官网看到的是Material Icons Outlined（轮廓样式）版本，两者属于不同的字体集合。
• 虽然你在index.html中同时引入了两种字体，但未明确指定mat-icon使用Outlined字体集，因此组件默认加载了实心版图标。

解决方法 #

方法1：单个图标指定字体集 #

直接在mat-icon标签上添加fontSet属性，指定使用Outlined样式：

<mat-icon fontSet="material-icons-outlined">upload</mat-icon>

方法2：全局配置默认字体集 #

如果希望所有mat-icon默认使用Outlined样式，可在项目的根模块（如app.module.ts）中配置默认字体集：

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

@NgModule({
  imports: [MatIconModule],
  exports: [MatIconModule]
})
export class AppModule {
  constructor(iconRegistry: MatIconRegistry) {
    // 设置全局默认字体集为Outlined
    iconRegistry.setDefaultFontSetClass('material-icons-outlined');
  }
}

额外检查项 #

1. 确认index.html中的字体引入链接格式正确，无拼写错误：

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
   

2. 通过浏览器开发者工具检查mat-icon元素的font-family属性，确认是否被自定义CSS意外覆盖，确保正确应用'Material Icons Outlined'字体。

内容的提问来源于stack exchange，提问作者K. van den Berg