更改部分 Material Icon 的颜色答案

【问题标题】：Change color of part of Material Icon更改部分 Material Icon 的颜色
【发布时间】：2019-08-09 20:05:18
【问题描述】：

我只想更改图片中的 Material 图标的部分颜色（来自谷歌）。在图像中它只显示底部栏改变颜色，而不是整个 A。

我回答了几个问题，只展示了如何更改物化图标的整个颜色。

我意识到我可以使用 svg，我可以将图像分解为不同的路径，然后按照 jdnz 的回答中所述指定每个路径的颜色。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <path d="M5 17v2h14v-2z" fill="#00FFFF"/>
  <path d="M12 5.98L13.87 11h-3.74zM9.5 12.8h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
</svg>

但是，我有几张图片，我不想创建很多 svg。

【问题讨论】：

标签： html css google-material-icons

【解决方案1】：

如果您使用 svg，您可以将图像分成不同的路径，然后指定每个路径的颜色。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <path d="M5 17v2h14v-2z" fill="#00FFFF"/>
  <path d="M12 5.98L13.87 11h-3.74zM9.5 12.8h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
</svg>

【讨论】：