<a class="mdl-button mdl-js-button mdl-js-ripple-effect">
Read more
<i class="material-icons">arrow_forward</i>
</a>
http://www.getmdl.io is very misleading, you have plenty stuff in there that are custom styles made just for the site.
Action here is to take a look at making sure icons within buttons line up properly. The style shown on the doc page is caused by out styleguide CSS and not the master CSS. The custom isn't shown since it isn't a part of the demo, but styles coming from styleguide.css.
On the note of getmdl being misleading... It really isn't. We never claim that everything shown on the site is possible with just MDL. Implementing well-built sites takes time and understanding. MDL is a set of components not a framework.
An easy fix for this:
.mdl-button .material-icons{
vertical-align: middle;
}
Most helpful comment
An easy fix for this:
.mdl-button .material-icons{ vertical-align: middle; }