如何使用轮廓 material 图标

Question

场景：

我正在使用 material 图标，但我遇到了问题，
我通常使用填充的图标，一切正常，
现在我想使用轮廓图一，他们有相同的名字，"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>

但它仍然显示填充的。

我该怎么做？

这与建议的副本不同，因为提供的解决方案是我尝试过但没有用的选项

Answer 1

看起来每个问题 #773 的轮廓字体尚未最终确定

https://github.com/google/material-design-icons/issues/773

我看到你正在审阅这个问题

在完全包含概述的版本之前，您将需要使用该 Whosebug 问题中提供的解决方法...我在 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>

Answer 2

您可以暂时使用此存储库。与 Material 图标正常

相当

cguilhermf/material-icons-outline

Answer 3

使用

<link type="text/css" 
href="https://fonts.googleapis.com/icon? 
family=Material+Icons+Outlined" 
rel="stylesheet">

而不是

<link type="text/css" 
href="https://fonts.googleapis.com/icon? 
family=Material+Icons&style=outlined" 
rel="stylesheet">

如何使用轮廓 material 图标

how to use outlined material icon

material-design

angular-material

google-material-icons