更改部分 Material 图标的颜色

Question

我只想更改 图标 Material 的部分颜色 （来自 google），如图中所示。在图像中，它只显示了底部栏的颜色变化，而不是整个 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。

Answer 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>

更改部分 Material 图标的颜色

Change color of part of Material Icon

html

css

google-material-icons