如何使用概述的材料图标

时间:2018-11-14 10:41:01

标签: angular-material material-design google-material-icons

场景:

  • 我使用的是实物图标,但我遇到了一个问题,
    我通常使用填充的图标,并且一切正常,
    现在我要使用轮廓图标,它们具有相同的名称, “ 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>

但它仍然显示已填充的那个。

我该怎么办?

这与建议的重复项不同,因为提出的解决方案是我尝试但不起作用的选项

2 个答案:

答案 0 :(得分:1)

每个问题#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>

答案 1 :(得分:0)

您可以暂时使用此存储库。效果与Material Icon正常相当

cguilhermf/material-icons-outline