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

Question

我现在有

<mat-icon>info<mat-icon>

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

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

Answer 1

索引.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

概述 eq AppModule 中的所有 mat-icon

export class AppModule { 
  constructor(iconRegistry: MatIconRegistry) {
    iconRegistry.setDefaultFontSetClass('material-icons-outlined');
  }
}

Answer 2

我是这样做的：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
rel="stylesheet"/>

<mat-icon fontSet="material-icons-outlined">edit</mat-icon>

在这里找到了解决方案。

Answer 3

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

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

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

Answer 4

您可以将其包括 |Material+Icons+Outlined在URL中以在大纲中显示材料图标。

例：

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

Answer 5

有两种方法。

// 1
// "_outline"

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<mat-icon>info</mat-icon>
<mat-icon>info_outlined</mat-icon> // outline work

// 2 
// "_outline" + fontSet attribute

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

<mat-icon fontSet="material-icons-outlined">info_outlined</mat-icon> // outline work
<mat-icon fontSet="material-icons-two-tone">info</mat-icon>
<mat-icon fontSet="material-icons-round">info</mat-icon>
<mat-icon fontSet="material-icons-sharp">info</mat-icon>

然而，并非所有图标都具有第一种方式的变化。例如。<mat-icon>home</mat-icon>并且<mat-icon>home_outlined</mat-icon>看起来一样。对于这些图标，第二种方式（“_outline”+ fontSet 属性）效果很好。

更多示例：

// fontSet attribute

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

<mat-icon>home</mat-icon>
<mat-icon>home_outlined</mat-icon> // outline not work
<mat-icon fontSet="material-icons-outlined">home</mat-icon> // outline happens to work (notice: this is NOT true for all icons)

// "_outline" + fontSet attribute

<mat-icon fontSet="material-icons-outlined">home_outlined</mat-icon> // outline work, for all icons. Recommended.
<mat-icon fontSet="material-icons-two-tone">home</mat-icon>
<mat-icon fontSet="material-icons-round">home</mat-icon>
<mat-icon fontSet="material-icons-sharp">home</mat-icon>

Answer 6

将其放入索引文件夹“ < link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"/>”

< mat-icon fontSet="material-icons-outlined">编辑