title: Material Icons vs Material Design Icons
body: <p>There are two ways to use Materilize Icon:</p>
  
  <pre><code>&lt;i class="mdi-ICON-NAME"&gt;&lt;/i&gt;
  &lt;i class="material-icons"&gt;ICON_NAME&lt;/i&gt;
  </code></pre>
  
  <p>In the official site I did not find guide or icon chart for using the font in this way <code>&lt;i class="mdi-ICON-NAME"&gt;&lt;/i&gt;</code> but there is guide on how to use the icon in this way <code>&lt;i class="material-icons"&gt;ICON_NAME&lt;/i&gt;</code> <a href="http://materializecss.com/icons.html" rel="noreferrer">here</a>.  </p>
  
  <p>So, when official site doesn't have guide on how to use the icon in this way <code>&lt;i class="mdi-ICON-NAME"&gt;&lt;/i&gt;</code>. Then why is it defined all over the stylesheet (materialize.css).</p>
  
  <p>Also, if I need to call the icon this way <code>&lt;i class="material-icons"&gt;ICON_NAME&lt;/i&gt;</code> then I need to link one for font file. Eg.<code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;</code>. Hence, I feel that 2 fonts will be loaded into the DOM which is not needed, right?  </p>
  
  <p>My quesiton is: Where can I find Icon chart if I need to use icon in this way <code>&lt;i class="mdi-ICON-NAME"&gt;&lt;/i&gt;</code>?</p>