【问题标题】：how to use outlined material icon如何使用轮廓材料图标
【发布时间】：2019-04-17 07:20:36
【问题描述】：
场景：
- 我正在使用材质图标，但遇到问题，
我通常使用填充图标，一切正常，
现在我想使用轮廓图标，它们具有相同的名称，“screen_share "
试用案例：
我的尝试是包含在 index.html 中：
<link
type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"/>
<link type="text/css"
href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined"
rel="stylesheet">
在 myComponent.html
中
<button mat-button>
<mat-icon>
screen_share_outline
</mat-icon>
</button>
但它仍然显示填充的。
我该怎么做？
这与建议的副本不同，因为提出的解决方案是我尝试过的选项，但没有奏效
【问题讨论】：
标签：
angular-material
material-design
google-material-icons
【解决方案2】：
看起来每个问题 #773 的轮廓字体尚未最终确定
https://github.com/google/material-design-icons/issues/773
我看到你正在审查这个问题
How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
在完全包含概述的版本之前，您将需要使用该 stackoverflow 问题中提供的解决方法...我在 stackblitz 中对其进行了验证，并且确实有效。
将以下导入添加到 index.html
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
将以下内容添加到 style.css
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
在您的组件 html 中使用以下内容。
<i class="material-icons-new outline-screen_share"></i>