Material Design Lite Font Issue

Question

I started to develope a new Website by using visual Studio as the development Environment. In the nuget packet Manager I added "Material Design Lite" to my Project. I just started to test some components and I got one Issue. Here is the Code of the menue that I wanted to implement.

   <div>
    <!-- Left aligned menu below button -->
    <button id="demo-menu-lower-left"
            class="mdl-button mdl-js-button mdl-button--icon">
        <!-- Intellisense doesn't suggest that font color I just just c&p-->
        <i style="font-family:Roboto Mono" class="material-icons">more_vert</i>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
        for="demo-menu-lower-left">
        <li class="mdl-menu__item">Some Action</li>
        <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
        <li disabled class="mdl-menu__item">Disabled Action</li>
        <li class="mdl-menu__item">Yet Another Action</li>
    </ul>
</div>

In my html head: <link href="Content/mdl-v1.1.2/material.min.css" rel="stylesheet" />

In the Body:

   <script src="Content/mdl-v1.1.2/material.min.js"></script>
   <script src="Scripts/angular.min.js"></script>

As the result I get:

As you see in the top left it is just desplaying plain text and not the right Symbol.

How to fix that? Thanks in regard.

@Sarcoma It is the Icon menue material-ui.com/#/components/icon-menu — Matthias Herrmann

hr_117 hr_117 · Accepted Answer · 2016-05-01T09:06:19

The font setup is not included in material design lite css (material.min.css).
To setup the icon fonts have a look to material-design-icons/

The easiest way to set up icon fonts for use in any web page is through Google Web Fonts. All you need to do is include a single line of HTML:

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

This could be a first start. If this is not what you like to do have a look for the different methods like Self hosting

Or use Spritesheets explained on MDL styles:

Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the sprites directory, under svg-sprite and css-sprite.

Material Design Lite Font Issue

1 Answers