Question

我正在寻找一种为某些图标着色的便携式解决方案。以下所述的原始问题出现在MacBook上的Chrome和Firefox中，在Safari中，颜色按预期工作。评论员报告说，这些颜色可以在Windows的Chrome浏览器中正常工作。

我有一个使用Material Design图标的简单jQuery Web应用程序。我可以使用CSS设置图标的颜色，一切都很好。但是对于一些图标，尤其是Folder，新的Outlined主题更适合我的应用程序，并且CSS颜色似乎没有任何作用。

有一个很好的示例，用于设置图标颜色here，如果我将该示例改写成这样：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
<title>Change Color of Google Material Design Icons Example</title>

<i class="material-icons">folder</i>
<i class="material-icons" style="font-size:40px;color:green">folder</i>
<i class="material-icons-outlined" style="font-size:50px;color:blue">folder</i>

在MacBook上的所有浏览器上，我看到标准的material-icons文件夹为绿色。在Safari上，我看到了预期的结果：文件夹的轮廓为蓝色。但是在Chrome和Firefox上，轮廓仍然为黑色。这种行为模式对于“概述的主题”，“双音”等扩展主题中的所有图标都是正确的。

建议。

Answer 1

我知道这是一个较旧的主题，但也许某些人仍在寻找答案。

轮廓图标似乎可以与css颜色设置一起正常工作

u1

设置双色调颜色：

如上所述，您可以使用x css键，但材料Two-tone主题似乎有问题；-）

使用自定义css过滤器在几种有角材料github issue中描述了一种解决方法。可以here生成此自定义过滤器。

例如：

HTML：

p.x

css：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">

<i class="material-icons-outlined" style="color:green">home</i>

附件：

Answer 2

由于材质图标是svg，因此您需要访问子svg元素，并操作svg值。它们不受color属性的影响

.material-icons svg {
  fill: white; // The filling
  stroke: black; // the outline - this depends on how the svg is drawn
}

新材料设计图标主题-设置颜色

2 个答案: