如何在Angular应用程序中显示Angular Material Icon以显示轮廓?

问题描述 投票:8回答:3

我现在有

<mat-icon>info<mat-icon>

它给出了填充颜色的信息图标的输出。但是,我只想要图标的轮廓。我怎么做?

我想要的图标是https://material.io/tools/icons/?icon=info&style=outline而不是https://material.io/tools/icons/?icon=info&style=baseline

angular angular-material
3个回答
9
投票

Edit: 5/2019

这个问题已经过时了。更深入,最近,答案可以在这里找到:How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

一般的想法是默认情况下不会导入某些图标,需要从不同的库中进行定位。


Original answer:

你在找<mat-icon>info_outline</mat-icon>

您可以对具有轮廓图像的任何项目使用相同的模板,但不要尝试将其用于填充/轮廓相同的对象。

例如<mat-icon>label</mat-icon><mat-icon>label_outline</mat-icon>


2
投票

您可以在网址中包含此|Material+Icons+Outlinedin以在大纲中显示材料图标。

例:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");

然后在模板文件中,您可以添加material-icons-outlined

<mat-icon class="material-icons-outlined">home</mat-icon>

0
投票

我不满意,直到知道谷歌还没有发布他们的新设计作为字体或svg图标集。因此我整理了一个小的npm包来解决问题。

https://www.npmjs.com/package/ts-material-icons-svg

只需导入您想要使用的图标并将它们添加到您的注册表中。简短教程在自述文件中。

干杯马可

© www.soinside.com 2019 - 2024. All rights reserved.