如何修改Materialize框架中图标激活状态的显示颜色

你无法修改生效的核心原因通常是自定义CSS优先级低于Materialize默认样式，或者未匹配到对应场景的激活态类，按以下步骤操作即可：

• 优先确认你的自定义样式代码（单独CSS文件或<style>标签）的引入顺序，必须放在Materialize官方CSS的引入代码之后，才能覆盖默认样式。
• 根据你使用图标的业务场景，使用对应选择器修改颜色，常见场景代码示例如下：

全局修改所有带active类的Materialize图标颜色 #

.material-icons.active {
  /* 替换为你需要的目标色值即可 */
  color: #ff5722 !important;
}

表单输入框前缀图标激活态颜色修改 #

.input-field .prefix.active {
  color: #2196f3 !important;
}

底部导航栏激活图标颜色修改 #

.bottom-navigation li.active .material-icons {
  color: #9c27b0 !important;
}

侧边导航激活项图标颜色修改 #

.sidenav li.active .material-icons {
  color: #f44336 !important;
}

如果以上方案仍不生效，可以打开浏览器开发者工具，选中激活状态的图标元素，查看「计算样式」面板中color属性对应的生效选择器，直接复用该选择器编写自定义颜色即可。

默认teal色激活图标效果参考：

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