Search code examples
cssmaterialize

Material Icons vs Material Design Icons


There are two ways to use Materilize Icon:

<i class="mdi-ICON-NAME"></i>
<i class="material-icons">ICON_NAME</i>

In the official site I did not find guide or icon chart for using the font in this way <i class="mdi-ICON-NAME"></i> but there is guide on how to use the icon in this way <i class="material-icons">ICON_NAME</i> here.

So, when official site doesn't have guide on how to use the icon in this way <i class="mdi-ICON-NAME"></i>. Then why is it defined all over the stylesheet (materialize.css).

Also, if I need to call the icon this way <i class="material-icons">ICON_NAME</i> then I need to link one for font file. Eg.<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">. Hence, I feel that 2 fonts will be loaded into the DOM which is not needed, right?

My quesiton is: Where can I find Icon chart if I need to use icon in this way <i class="mdi-ICON-NAME"></i>?


Solution

  • I got it answered by Materialize team: https://github.com/Dogfalo/materialize/issues/1824#issuecomment-125949178

    For question: Where can I find Icon chart if I need to use icon in this way <i class="mdi-ICON-NAME"></i>

    I got answer: The mdi type icons are being phased out for the official google sources, that's why you won't find the old chart in the documentation. A complete list of the new icons can be found in https://www.google.com/design/icons/

    For question: Why not just delete all the mdi icons and css defined as new icons are already offered by google, isn't it?

    I got answer: Because that would suddenly break all the user implementations, so this way it can be phased out gradually, giving people time to update their icons.

    If you really need to check the old implementation, you can go through the commit history from https://github.com/Dogfalo/materialize/blob/master/icons.html and look at a version before the google icons were added.