I am using Pug and angular / angular material to work on a project of mine. Since it will use the material design styles it will need the material icons. It is supposed to work like this:
<i class="material-icons">chevron_left</i>
But for some reason the 'icons' just show up as italic text. (the text being "chevron_left" or whatever ofcourse)
Here is my 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
And here is how it outputs the lines with the icons in it:
<md-button class="md-icon-button" aria-label="Menu" ng-hide="user.logged==false"><i class="material_icons">menu</i></md-button>
The weird thing in this mess is that it not only shows the menu and more icons as italic text, If I switch user.logged to false it shows the chevron_right properly as an icon.
I'm sorry if anything is unclear, or if this has been asked before. I did not find any useful answers. It did work before I was using Pug.
I have found a workaround for this. Since I couldn't seem to get it to work this way I used the md-icon with a SVG path. I just downloaded the SVG files from material.io and placed them in a folder and then used this HTML:
<md-icon md-svg-src="icons/android.svg" aria-label="android "></md-icon>
Or this pug:
md-icon(md-svg-src="icons/android.svg" aria-label="android ")
and that seemed to work. hope it may help someone else someday. Just don't rely on the ligatures since it may not always work (mostly for IE browsers)
Whever I start using mdIconProvider I might update this answer to help out some more people