Components: Icon Buttons in Toolbar do not vertically center align.

[praveenpuglia]

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?

[msegers]

Interesting I don't have this issue

<md-toolbar color="primary">
    <button class="app-icon-button mobile" (click)="sidenav.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
    </button>

    {{title}} {{subtitle}}

    <span class="app-toolbar-filler"></span>    <l-nav class="desktop"></l-nav>

  </md-toolbar>

the mobile class just makes sure it doesn't show on desktop view.

App icon button is nothing special

.app-icon-button {
color: white;
background: none;
border: 0;
margin-right: 8px;
}

Maybe try without a button?

[praveenpuglia]

Semantically i should be using the button element because it triggers an action on the same page. I wouldn't want to just put an icon that's clickable and does what a button should do.

even with your markup, it doesn't solve the problem for me. Can you post a plunkr where I can see how it works for you?

[praveenpuglia]

As a temporary workaround I added vertical alignment to the icon itself which seems to positioning around center but it's not real centering. It seems like it a little below the center line.

<button md-button><md-icon style="color:white; vertical-align:middle;">home</md-icon></button>

[msegers]

I used the example app from Jeremy

https://github.com/jelbourn/material2-app
https://material2-app.firebaseapp.com/

I don't see why a tiny amount of styling should hurt ;-).
Material2 doesn't do any margins etc. so you could set the proper margins on your button to make it work. gl.

[jelbourn]

I believe md-icon-button (rather than md-button) should do what you want. Can re-open if that's not the case.

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

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}