Icon Buttons in Toolbar do not vertically center align.

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Button with icons should seem to be vertically center aligned in toolbar. A button with just text works as expected.

What is the current behavior?

Icon buttons don’t work as expected. The icons seem to align to the top of the toolbar. This is best explained in the screenshot below.

What are the steps to reproduce?

Here’s my code

<md-toolbar class="toolbar">
  <span class="toolbar-title">Awesome</span>
  <button md-button><md-icon style="color:white">home</md-icon></button>
  <button md-button style="color:white">ABOUT</button>
</md-toolbar>

Providing a Plunker (or similar) is the best way to get the team to see your issue. http://plnkr.co/edit/W5RnGGRszmCBwv2JYYc9?p=preview

Which versions of Angular, Material, OS, browsers are affected?

I am on Angular 2 RC 2. Material 2.0.0-alpha.5-2 OS - ubuntu 16.04 Browser : Chrome - 51.0.2704.103, Firefox - 47.

Is there anything else we should know?

[TrevorBroderick1]

What about a situation where you want to have text and an icon in the button?

<button md-button>
    <span>Log Out</span>
    <md-icon class="md-24">lock</md-icon>
</button>

This does not vertically align the icon with the text, and md-icon-button isn’t right for this situation.

[praveenpuglia]

I didn’t find anything yet that addresses a situation like this.

Each of those could well be buttons we may require at different places.