如何在 Angular 应用中使用 Material Design 图标答案

【问题标题】：How to use Material Design Icons in Angular app如何在 Angular 应用中使用 Material Design 图标
【发布时间】：2016-01-17 15:16:49
【问题描述】：

我正在使用 Angular Material Design 为我的 AngularJS 应用程序提供响应式设计。我正在使用我安装的材料设计图标：

bower install material-design-icons

然后我将 css 声明为 CDN 链接，即：

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

我正在使用这些图标：

<i class="material-icons md-36 md-dark">person</i>

我的问题是没有办法从 bower_components 中包含 css。我想用来自 bower_components 的本地源替换 CDN 源到 css。但是我没有看到在我的 bower_components 中下载了任何 css 文件。

这是我的 bower_components/material-design-icons 目录的样子：

我按照Material icons guide 中的说明进行操作，但无法弄清楚是否包含来自bower_components 的CSS。

【问题讨论】：

【解决方案1】：

在您的 materil-design-icons 文件夹中，您有 iconfont 文件夹，其中包含您所需的 CSS 文件。

【讨论】：

【解决方案2】：

材料设计图标有两种类型....字体图标和svg图标

您显示的标记用于字体图标

图标字体的bower包是material-design-iconfont

试试bower install material-design-iconfont ---save

【讨论】：

【解决方案3】：

如果我理解了您的问题，您正在尝试在您的网络应用中使用材料设计。包材料设计图标只是图标info。我相信，要实现你想要的，你应该得到bower google包material design lite info，他们还提供了一组templates

【讨论】：