如何使用轮廓材质图标

Question

场景：

• 我正在使用材质图标，我遇到了一个问题，
  我通常使用填充的图标，一切都很好，
  现在我想使用轮廓图标，它们有相同的名称，"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

使用

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

Answer 2

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

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

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

如何使用新材料设计图标主题：轮廓、圆形、双色调和尖锐？

在概述的版本完全包含之前，您需要使用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>

Answer 3

您可以暂时使用此存储库。与Material Icon普通相当

cguilhermf/材料图标概述