Search code examples
material-design-lite

Material Design icons are too large

Below is an example where I add a Material Design icon into a MDL button:
http://jsbin.com/razocuhoxu/edit

But I'm missing something. The arrow icon's width is obviously too large (it takes the space of the text "arrow forward").

Can anyone clarify how I'm supposed to use them the right way?

Solution

  • You'll need to use underscores instead of spaces for the font family to display the icon properly.

    Either:

    <div class="material-icons">forward</div>

    Or:

    <div class="material-icons">arrow_forward</div>