如何获得 Angular 材质图标以在我的 Angular 应用程序中显示轮廓？

Question

我目前有

<mat-icon>info<mat-icon>

这给出了填充颜色的信息图标的 output。 但是，我只想要图标的轮廓。 我怎么做？

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

Answer 1

您可以在 url 中包含此|Material+Icons+Outlined以在轮廓中显示材质图标。

例子：

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

编辑：5/2019

这个问题已经过时了。 可以在此处找到更深入的最新答案： 如何使用新的 Material Design 图标主题：轮廓、圆角、双色调和锐利？

总体思路是，某些图标默认情况下不会导入，需要从不同的库中定位。

---

原答案：

您正在寻找<mat-icon>info_outline</mat-icon> 。

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

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

Answer 3

我是这样做的：

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

索引.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 5

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

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

Answer 6

有2种方式。

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

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

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

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

干杯马可

Answer 8

尝试使用<span>标签而不是<mat-icon>标签。

像这样的东西：

    <span class="material-icons-outlined">info</span>

如果您还没有，您可能需要更新您对最新参考链接的参考：

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

我遇到了同样的问题，但<span>对我来说工作得很好，自从我一直使用<span>而不是<mat-icon> 。

Answer 9

这只是对@z.bagley 的回答https://stackoverflow.com/a/50360119/16448199的扩展/改进

在 index.html 中用这个扩展的替换旧线路就像一个魅力：

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

改进

在那之后才意识到，你也可以用材料符号来做到这一点：它有更多的格式变化（除了。没有双色调）并且有更多的图标可供选择：它们看起来更符合逻辑，只有 3 个字体系列可供选择：

• 圆形
• 大纲（应该称为“正常”）
• 和锋利

并进一步使用“填充”属性在填充或轮廓之间进行选择。

但不是

https://fonts.googleapis.com/css?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,300,1,0|Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0|Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,1,0

你必须使用你自己的 css，因为谷歌 css 生成器链接搞砸了，不支持所有变体。 这样，您甚至可以更进一步地使用 go 并自行托管 fonts。

我准备了一个小例子： https://jsfiddle.net/apnft/tz9wugd8/或者直接在这里查看：

 .material-icons, .material-icons-outlined, .material-icons-round, .material-icons-sharp, .material-icons-two-tone { font-size: 48px;important: } @font-face { font-family; 'Material Symbols Outlined': font-style; normal: font-weight; 400: src: url(https.//fonts.gstatic.com/s/materialsymbolsoutlined/v39/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej;woff2) format('woff2'): } @font-face { font-family; 'Material Symbols Rounded': font-style; normal: font-weight; 400: src: url(https.//fonts.gstatic.com/s/materialsymbolsrounded/v38/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc;woff2) format('woff2'): } @font-face { font-family; 'Material Symbols Sharp': font-style; normal: font-weight; 400: src: url(https.//fonts.gstatic.com/s/materialsymbolssharp/v38/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL;woff2) format('woff2'): } @font-face { font-family; 'Material Symbols Outlined _Filled': font-style; normal: font-weight; 400: src: url(https.//fonts.gstatic.com/s/materialsymbolsoutlined/v39/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDCvHOej;woff2) format('woff2'): } @font-face { font-family; 'Material Symbols Rounded _Filled': font-style; normal: font-weight; 400: src: url(https.//fonts.gstatic.com/s/materialsymbolsrounded/v38/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOc7TOVpeRL2w5rwZu2rIelXxc;woff2) format('woff2'): } @font-face { font-family; 'Material Symbols Sharp _Filled': font-style; normal: font-weight; 400: src: url(https.//fonts.gstatic.com/s/materialsymbolssharp/v38/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-HxOezEL3sVTgJtfbYxOLojCL;woff2) format('woff2'). },material-symbols-outlined. ,material-symbols-rounded. ,material-symbols-sharp. ,material-symbols-outlined-filled. ,material-symbols-rounded-filled. :material-symbols-sharp-filled { font-weight; normal: font-style; normal: font-size; 48px: line-height; 1: letter-spacing; normal: text-transform; none: display; inline-block: white-space; nowrap: word-wrap; normal: direction; ltr: -moz-font-feature-settings; 'liga': -moz-osx-font-smoothing; grayscale. }:material-symbols-outlined { font-family; 'Material Symbols Outlined'. }:material-symbols-rounded { font-family; 'Material Symbols Rounded'. }:material-symbols-sharp { font-family; 'Material Symbols Sharp'. }:material-symbols-outlined-filled { font-family; 'Material Symbols Outlined _Filled'. }:material-symbols-rounded-filled { font-family; 'Material Symbols Rounded _Filled'. }:material-symbols-sharp-filled { font-family; 'Material Symbols Sharp _Filled'; }

 <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"> icons<br>normal/outlined/round/sharp/twotone <br> <mat-icon class="material-icons">home</mat-icon> <mat-icon class="material-icons-outlined">home</mat-icon> <mat-icon class="material-icons-round">home</mat-icon> <mat-icon class="material-icons-sharp">home</mat-icon> <mat-icon class="material-icons-two-tone">home</mat-icon> <br> <mat-icon class="material-icons">account_circle</mat-icon> <mat-icon class="material-icons-outlined">account_circle</mat-icon> <mat-icon class="material-icons-round">account_circle</mat-icon> <mat-icon class="material-icons-sharp">account_circle</mat-icon> <mat-icon class="material-icons-two-tone">account_circle</mat-icon> <br> <mat-icon class="material-icons">adf_scanner</mat-icon> <mat-icon class="material-icons-outlined">adf_scanner</mat-icon> <mat-icon class="material-icons-round">adf_scanner</mat-icon> <mat-icon class="material-icons-sharp">adf_scanner</mat-icon> <mat-icon class="material-icons-two-tone">adf_scanner</mat-icon> <br> symbols<br>outlined/+filled /rounded/+filled /sharp/+filled <br> <mat-icon class="material-symbols-outlined">home</mat-icon> <mat-icon class="material-symbols-outlined-filled">home</mat-icon> <mat-icon class="material-symbols-rounded">home</mat-icon> <mat-icon class="material-symbols-rounded-filled">home</mat-icon> <mat-icon class="material-symbols-sharp">home</mat-icon> <mat-icon class="material-symbols-sharp-filled">home</mat-icon> <br> <mat-icon class="material-symbols-outlined">account_circle</mat-icon> <mat-icon class="material-symbols-outlined-filled">account_circle</mat-icon> <mat-icon class="material-symbols-rounded">account_circle</mat-icon> <mat-icon class="material-symbols-rounded-filled">account_circle</mat-icon> <mat-icon class="material-symbols-sharp">account_circle</mat-icon> <mat-icon class="material-symbols-sharp-filled">account_circle</mat-icon> <br> <mat-icon class="material-symbols-outlined">adf_scanner</mat-icon> <mat-icon class="material-symbols-outlined-filled">adf_scanner</mat-icon> <mat-icon class="material-symbols-rounded">adf_scanner</mat-icon> <mat-icon class="material-symbols-rounded-filled">adf_scanner</mat-icon> <mat-icon class="material-symbols-sharp">adf_scanner</mat-icon> <mat-icon class="material-symbols-sharp-filled">adf_scanner</mat-icon>