Question

我正在使用Pug和角度/角度材料来处理我的项目。由于它将使用材料设计样式，因此需要材料图标。它应该像这样工作：

<i class="material-icons">chevron_left</i>

但出于某种原因，＆＃39;图标＆＃39;只是显示为斜体文字。（文字是＆＃34; chevron_left＆＃34;或者其他什么）

这是我的nav.pug：

nav
    md-toolbar(class="md-whiteframe-z1")
        div(class="md-toolbar-tools")
            md-button(class="md-icon-button" aria-label="Menu" ng-hide="user.logged==false")
                i(class="material_icons") menu
            md-button(class="md-icon-button" aria-label="Menu" ng-hide="user.logged==true")
                i(class="material-icons") chevron_left

            h2(md-truncate flex) login

            md-button(class="md-icon-button" aria-label="More")
                i(class="material_icons") more_vert

以下是它如何输出带有图标的行：

<md-button class="md-icon-button" aria-label="Menu" ng-hide="user.logged==false"><i class="material_icons">menu</i></md-button>

这个混乱中的奇怪之处在于它不仅显示菜单和更多图标作为斜体文本，如果我将user.logged切换为false它会将chevron_right正确显示为图标

对不起，如果有什么不清楚，或者之前有人问过这个问题，我很抱歉。我没有找到任何有用的答案。在我使用Pug之前它确实有效。

Answer 1

我找到了解决方法。由于我似乎无法以这种方式工作，所以我使用md-icon和SVG路径。我刚刚从material.io下载了SVG文件并将它们放在一个文件夹中，然后使用了这个HTML：

<md-icon md-svg-src="icons/android.svg" aria-label="android "></md-icon>

或者这个哈巴狗：

md-icon(md-svg-src="icons/android.svg" aria-label="android ")

这似乎有效。希望有一天它可以帮助别人。只是不要依赖连字，因为它可能并不总是有效（主要是IE浏览器）

当我开始使用mdIconProvider时，我可能会更新此答案以帮助更多人

Answer 2

我遇到了同样的问题，但是我发现我忘记为Google字体图标添加链接

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

材料图标连字不适用于Pug

2 个答案: