Angular Material toolbar图标样式未正确格式化问题求助

问题原因 #

你遇到的按钮样式异常是以下几个常见原因导致的：

• 缺失MatButtonModule导入：你代码里用了mat-button指令，这个指令归属于@angular/material/button的MatButtonModule模块，你当前的app.modules.ts中没有导入该模块，所以按钮的Material样式无法生效。
• 未正确引入Angular Material全局预构建主题：如果运行ng add @angular/material时没有选择主题，或者主题配置丢失，也会导致所有Material组件样式异常。
• （可选）Material Icons字体未引入：如果菜单图标显示为方块而非正确的菜单图标，还需要检查是否引入了官方的Material Icons字体资源。

修复步骤 #

1. 打开app.modules.ts，添加MatButtonModule的导入：

// 新增导入语句
import { MatButtonModule } from '@angular/material/button';

// 在imports数组中添加MatButtonModule
imports: [
  BrowserModule,
  AppRoutingModule,
  NoopAnimationsModule,
  MatToolbarModule,
  MatSidenavModule,
  MatIconModule,
  MatButtonModule // 新增这行
]

2. 确认全局主题配置正确：
   打开项目根目录的src/styles.css，确认存在以下导入语句（主题名可根据你实际选择的调整）：

@import "@angular/material/prebuilt-themes/indigo-pink.css";

如果没有手动添加即可，也可以在angular.json的build.options.styles数组中配置主题路径。
3. 若图标显示异常，在src/index.html的<head>标签中添加字体引入：

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

完成修改后重启开发服务即可看到正常的按钮样式。

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