在 Angular 中使用时缺少 Material Design Lite 图标答案

【问题标题】：Material Design Lite Icons missing when using in Angular在 Angular 中使用时缺少 Material Design Lite 图标
【发布时间】：2016-11-27 07:23:18
【问题描述】：

所以我开始在我的 Angular 项目中使用MDL，它工作得很好，但是 MDL 图标在那里不起作用......

我像<i class="material-icons">share</i> 这样使用它们，浏览器只是将“共享”写为普通字体，而不是像它应该做的那样。我已经包含了 mdl css 和 js，还包含了 angular-material-design-lite 包。

【问题讨论】：

标签： css angularjs material-design

【解决方案1】：

您必须确保正确安装了所有字体资源（.woff、.svg、.tff 等），并且您的 css 表中的字体在正确的路径中引用。

【讨论】：

【解决方案2】：

似乎我只需要通过 bower 安装字体：bower install material-design-icons --save 并将其添加到我的 css 中：

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

【讨论】：