Angular Material M3中get-theme-color使用及图标颜色问题排查

一、mat-icon-button图标颜色不生效的解决方案 #

你遇到的问题是Sass变量赋值给CSS变量--mdc-icon-button-icon-color未生效，直接写#fff正常，大概率是变量解析或作用域的问题，试试以下几种方法：

1. 确保Sass变量正确解析为颜色值 #

用Sass插值语法将变量转换为CSS可识别的颜色值，同时优化主题颜色的获取方式：

@mixin theme($theme, $variant-colors) {
  // 从主题中提取primary调色板，再获取on-primary颜色
  $primary-palette: mat.get-theme-palette($theme, primary);
  $text-color: mat.get-color-from-palette($primary-palette, on-primary);

  a > span {
    color: $text-color;
  }
  
  // 用插值语法注入Sass变量到CSS变量
  .navbar mat-icon-button {
    --mdc-icon-button-icon-color: #{$text-color};
  }
}

2. 直接为mat-icon设置颜色 #

绕过CSS变量，直接给mat-icon元素设置颜色，优先级更高且更稳定：

@mixin theme($theme, $variant-colors) {
  $text-color: mat.get-theme-color($theme, on-primary);

  a > span {
    color: $text-color;
  }
  
  .navbar mat-icon {
    color: $text-color;
  }
}

3. 检查主题mixin的作用范围 #

确保主题mixin正确应用到包含导航栏的容器上，比如：

.navbar {
  @include theme($your-theme, $your-variant-colors);
}

二、Angular Material M3优质教程推荐 #

1. 官方M3主题文档：权威覆盖M3主题配置、自定义颜色系统、排版、形状等核心内容，是入门和进阶的首选参考。
2. 官方组件示例库：每个M3风格组件都配有可运行代码示例，能直观学习组件用法和样式调整技巧。
3. M3迁移实战指南：技术博主发布的从M2到M3的分步教程，包含主题适配、组件兼容、常见问题排查等实用内容。
4. 自定义主题系列文章：讲解如何根据产品需求定制M3主题，包括调色板修改、深色模式适配、组件样式覆盖等进阶技巧。

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