Angular Material 18：mat-icon内用mat-tooltip时显示文本而非图标

这不是Angular Material的Bug，问题出在MatIcon模块配置或图标资源加载上，和matTooltip指令本身无关。以下是具体排查和解决步骤：

• 确认模块中已导入MatIconModule
  你仅提到导入了MatTooltipModule和CommonModule，但<mat-icon>的渲染依赖MatIconModule，必须在当前组件所属的NgModule中导入：

  import { MatIconModule } from '@angular/material/icon';
  import { MatTooltipModule } from '@angular/material/tooltip';
  import { CommonModule } from '@angular/common';
  
  @NgModule({
    imports: [
      CommonModule,
      MatIconModule,
      MatTooltipModule
    ],
    declarations: [YourComponent]
  })
  export class YourModule { }
  

• 检查Material Icons字体是否加载
  Angular Material默认图标依赖Material Icons字体，需在index.html中引入：

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

  若使用自托管字体，确保文件路径配置正确。

• 验证图标名称正确性
  确认verified是有效的Material Icons图标名称，拼写错误会导致仅显示文本。

• 排查样式冲突
  自定义CSS可能覆盖<mat-icon>的默认样式（比如修改了font-family），可通过浏览器开发者工具检查该元素的font-family是否为Material Icons。

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