材料图标连字不适用于Pug

Posted 2021-04-13

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

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

但出于某种原因，“图标”只是显示为斜体文字。 （文字是“chevron_left”或其他任何一种）

这是我的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之前它确实有效。

答案

我找到了解决方法。因为我似乎无法以这种方式工作，所以我使用带有SVG路径的md-icon。我刚刚从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时，我可能会更新此答案以帮助更多人

另一答案

我有同样的问题，但我发现我忘了添加谷歌字体图标的链接

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