我现在有
<mat-icon>info<mat-icon>
它给出了填充颜色的信息图标的输出。但是,我只想要图标的轮廓。我怎么做?
我想要的图标是https://material.io/tools/icons/?icon=info&style=outline而不是https://material.io/tools/icons/?icon=info&style=baseline
这个问题已经过时了。更深入,最近,答案可以在这里找到:How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
一般的想法是默认情况下不会导入某些图标,需要从不同的库中进行定位。
你在找<mat-icon>info_outline</mat-icon>
。
您可以对具有轮廓图像的任何项目使用相同的模板,但不要尝试将其用于填充/轮廓相同的对象。
例如<mat-icon>label</mat-icon><mat-icon>label_outline</mat-icon>
您可以在网址中包含此|Material+Icons+Outlined
in以在大纲中显示材料图标。
例:
@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>
我不满意,直到知道谷歌还没有发布他们的新设计作为字体或svg图标集。因此我整理了一个小的npm包来解决问题。
https://www.npmjs.com/package/ts-material-icons-svg
只需导入您想要使用的图标并将它们添加到您的注册表中。简短教程在自述文件中。
干杯马可