Material-design-lite: Icons in buttons not lining up.

Created on 20 Jul 2015  路  2Comments  路  Source: google/material-design-lite

<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.

Button Icons confirmed feature-request

Most helpful comment

An easy fix for this:

.mdl-button .material-icons{ vertical-align: middle; }

All 2 comments

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; }

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ktodyruik picture ktodyruik  路  5Comments

itisparas picture itisparas  路  3Comments

rafaelcorreiapoli picture rafaelcorreiapoli  路  3Comments

adiramardiani picture adiramardiani  路  4Comments

baldram picture baldram  路  4Comments