Material Icons, vertical-align

Vertical-align issue material design icons

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<a href="#">no underline</a>
<a href="#" class="bottom">no underline, icon v-align bottom</a>
<a href="#" class="underline">underline</a>
<a href="#" class="underline bottom">underline, icon v-align bottom</a>

CSS

a {
  text-decoration: none;
  display: block;
  margin: 1em;
}

a.underline {
  text-decoration: underline;
}

a:before {
  content: "\E315";
  font-family: 'Material Icons';
}

a.bottom:before {
  vertical-align: bottom;
}