angular-material - 如何使用轮廓材料图标

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

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

如何使用新的 Material Design Icon 主题：轮廓、圆角、双色调和锐利？

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