我目前拥有
<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图标显示轮廓？
72
- zer0
1
可能是如何使用新的Material Design图标主题：Outlined，Rounded，Two-Tone和Sharp？的重复问题。 - Z. Bagley
11个回答
84
您可以在 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>
- Sher
1
16请继续滚动...，这是与IT有关的内容。使用
fontSet。 - cambunctious46
编辑：2019年5月
此问题已经过时。更详细、更新的答案可以在这里找到：如何使用新的 Material Design 图标主题: Outlined, Rounded, Two-Tone 和 Sharp？
一般的想法是，一些图标没有默认导入，需要从不同的库中进行目标定位。
编辑：2022年2月
最新的导入链接的快速参考，以节省点击次数：
<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>info_outline</mat-icon>。您可以将此相同的模板用于任何具有轮廓图像的项目，但不要尝试将其用于填充/轮廓相同的对象。例如：<mat-icon>label</mat-icon><mat-icon>label_outline</mat-icon>。- Z. Bagley
9
16当图标的名称很复杂时，这对我来说不起作用。 - Daniel Delgado
1对我来说也没用，特别是对于edit_outline图标。不过Sherman的答案很好用。 - Chris Newman
1这个问题并没有过时，你提供的链接是关于使用 Material Design 的，与 Angular Material 没有任何关系。 - Skeeve
@Skeeve，我提供的链接展示了导入和应用Material Design图标的确切方式（这也是我之前回答中提到的），并且它使用了他们的新标准化。最终，这不是一个关于Angular或Material的特定问题或答案，那个链接提供了应用任何图标所需的CSS（
mat-icon或标准的i）。 - Z. Bagley1这不是一个特定于Angular或Material的问题，但它确实与此相关。它有相应的标签，并且在标题和问题本身中明确提到了angular material。 - Skeeve
显示剩余4条评论
45
这是我做的方法：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
rel="stylesheet"/>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
在这里找到了解决方案。
- zeljko_a
16
Index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
列出 AppModule 中的所有 mat-icon。
export class AppModule {
constructor(iconRegistry: MatIconRegistry) {
iconRegistry.setDefaultFontSetClass('material-icons-outlined');
}
}
- NicolayM
3
1这正是我一直在寻找的。只需在一个地方进行更改，即可快速切换填充和轮廓。 - Lee Gunn
3这应该被标记为全局设置默认图标风格的答案。 - Danny Schneider
1正是我所需要的。简洁明了。 - Gaëtan LOISEL
8
有两种方式。
然而，并非所有图标都像第一种方式那样有变体。例如，
更多例子：
// 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>
- tinystone
5
将以下代码放入索引文件夹中：
"<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"/>"
<mat-icon fontSet="material-icons-outlined">edit
- Kheireddine Azzez
1
这只是对@z.bagley答案的扩展/改进https://dev59.com/a1UL5IYBdhLWcg3wb3lz#50360119
在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">
改进
刚刚意识到，您也可以使用材料符号来实现这一点！它具有更多的格式变体（除了：没有双色调）和更多的图标可供选择。只需选择三种字体系列，它们看起来更加合理：
- 圆形
- 轮廓（应该称为“正常”）
- 和尖锐
并且通过属性“填充”进行选择，以选择填充或轮廓。
但是，与其
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，因为Google CSS生成器链接会出现一些问题，并且不支持所有变体组合。这样，你甚至可以进一步自行托管字体。
i prepared a small example: https://jsfiddle.net/apnft/tz9wugd8/ or check it here directly:
.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>- JamesDK
1
在我看来，最好的方法是注入图标默认值。
首先，在index.html中添加字体：
然后将默认值添加到模块中：
所有的图标都将使用轮廓版本。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
然后将默认值添加到模块中：
providers: [
{ provide: MAT_ICON_DEFAULT_OPTIONS, useValue: { fontSet: 'material-icons-outlined' } }
]
所有的图标都将使用轮廓版本。
- Gustavo Cantero
0
尝试使用<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>。
- stephen carvalho
0
我对此感到不满，直到现在Google还没有发布他们的新设计作为字体或SVG图标集。因此，我组合了一个小的npm包来解决这个问题。
https://www.npmjs.com/package/ts-material-icons-svg
只需导入您想要使用的图标并将它们添加到您的注册表中。简短的教程在Readme中。
祝好，Marco
- MarcusCalidus
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
- 相关问题
- 9 如何在Angular Material中使滚动条始终可见？
- 14 Angular Material图标 mat-icon未正确显示
- 6 如何在Angular Material 4中使卡片居中对齐？
- 11 如何在Angular 5中的Angular Material Snackbar中添加图标
- 22 使用 Angular 2 Material 图标
- 3 如何在Angular 7中使Angular Material对话框可调整大小？
- 51 如何在Angular 4中使用Material Design图标？
- 4 Angular 7 + Angular Material。如何在mat-menu下拉菜单展开时切换图标？
- 19 如何在Angular Material中使mat-checkbox不可点击
- 5 如何在 Angular 中使用品牌 FontAwesome 图标