jquery - 新 Material 设计图标主题 - 设置颜色

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 上，轮廓仍然是黑色的。这种行为模式适用于 Outlined、Two-Tone 等扩展主题中的所有图标。

请提出建议。

Answer 1

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

大纲图标似乎与 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>

设置双色调:

如上所述，您可以使用 color css 键， Material 除外 Two-tone主题似乎有点问题;-)

解决方法在几个 Angular Material github issue 之一中有所描述通过使用自定义 css 过滤器。可以生成此自定义过滤器 here .

例如:

HTML:

<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-two-tone red">home</i>

CSS:

.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

附件:

• 工作 Angular Stackblitz
• > Codepen example
• > Codepen CSS filter Generator