如何在 Angular 4 中使用 Material Design 图标？

我想使用来自的图标https://materialdesignicons.com/ https://materialdesignicons.com/在我的 Angular 4 项目中。 网站上的说明仅涵盖如何将其包含在Angular 1.x (https://materialdesignicons.com/getting-started https://materialdesignicons.com/getting-started)

我如何包含材料设计图标，以便我可以像这样使用它们<md-icon svgIcon="source"></md-icon> using Angular Material and ng serve?

注意：我已经包含了google material icons哪些是不同的！

对于那些喜欢使用 SCSS 的人：

安装字体

$> npm install material-design-icons

导入src/styles.scss

@import '~material-design-icons/iconfont/material-icons.css';

并按照描述在 HTML 中使用它here https://material.io/icons/#ic_visibility

<!-- write the desired icon as text-node -->
<i class="material-icons">visibility</i>

为了参考山姆·克劳斯 https://stackoverflow.com/users/5054792/sam-claus评论，谢谢您，我添加了Templarian设计图标的安装和使用。它与上面的类似。

通过包管理器安装字体

$> npm install @mdi/font

将样式表导入到src/styles.scss, or in angular.json正如评论中所描述的A. Morel https://stackoverflow.com/users/2736742/a-morel here https://stackoverflow.com/questions/44677960/how-to-use-material-design-icons-in-angular-4/53575087#53575087

@import '~@mdi/font/css/materialdesignicons.css';

或使用CDN URL https://cdn.materialdesignicons.com/4.7.95/css/materialdesignicons.min.css在index.html或任何地方 并按照描述在 HTML 中使用它here https://dev.materialdesignicons.com/getting-started/webfont

<!-- use the symbol name as a class instead of a text-node -->
<span class="mdi mdi-home"></span>

Addendum: 我的回答有点老了。这仍然可以正常工作，但不再是最先进的。的答案是A. Morel https://stackoverflow.com/users/2736742/a-morel here https://stackoverflow.com/questions/44677960/how-to-use-material-design-icons-in-angular-4/53575087#53575087更现代一些。