如何修改网站使用的Google Icons颜色？Flipkart克隆站点自定义黄色图标求助

Google Material Icons 属于字体图标，所有字体相关的CSS属性都可直接作用于图标，修改颜色直接调整color属性即可，以下是三种常用实现方案：

方案1：内联样式直接设置 #

直接在图标标签上添加style属性修改颜色，适合单个图标临时调整：

<span class="material-icons-outlined" style="color: #FFC200;">
work_outline
</span>

注：#FFC200 为Flipkart官网常用品牌黄色值，可按需替换为其他黄色色值。

方案2：全局CSS类统一设置 #

适合批量修改同色系图标，复用性更高：

1. 先在CSS文件中添加自定义样式类：

.fk-yellow-icon {
  color: #FFC200;
  /* 如需调整图标大小也可直接加font-size属性：font-size: 24px; */
}

2. 在图标标签上引用该类即可：

<span class="material-icons-outlined fk-yellow-icon">
work_outline
</span>

方案3：codepoint引入方式的颜色设置 #

如果你是通过codepoint（e943）用伪元素调用图标，直接给伪元素添加color属性即可：

.custom-work-icon::before {
  font-family: 'Material Icons Outlined';
  content: '\e943';
  color: #FFC200;
}

常见问题排查 #

如果设置后颜色不生效，可检查是否有其他更高优先级的CSS规则覆盖了color属性，可通过提升选择器权重（如加上父元素类名）或临时添加!important测试。

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