md-icon is not rendered correctly in md-button

[M4R1KU]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The Icon in md-icon should be aligned horizontally centered when it is used in a md-raised-button.

What is the current behavior?

When I have a md-icon in a md-raised-button the icon is rendered at the top of the button and not in the center like the normal text is.

What are the steps to reproduce?

<button md-raised-button">Last<md-icon>navigate_before</md-icon></button>

Like you can see the icon is rendered very weird.

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

Angular: 2.0.1
Angular Material: 2.0.0-alpha.9-3
Angular-CLI: 1.0.0-beta.15

Tested in Chrome and Firefox on Ubuntu 16.04

[emilio-martinez]

I found this as well. I made due in the mean time by setting vertical-align to [md-raised-button] md-icon

[denislamela]

I have the same problem with version "v2.0.0-alpha.8-2". Could you put an example of your workaround @emilio-martinez? Thanks

[denislamela]

I found a workaround for this issue in my case (row with "center center" alignment):

          <button md-raised-button color="primary" type="button" (click)="addPoint()">
            <div layout="row" layout-align="center center">
              <md-icon md-list-avatar>note_add</md-icon> 
              {{ 'ADD_POINT' | oTranslate }}
            </div>
          </button>

[denislamela]

An easier option (adding style="vertical-align:middle;")

<button md-raised-button color="primary" type="button" (click)="addPoint()"><md-icon md-list-avatar style="vertical-align:middle;">note_add</md-icon> {{ 'ADD_POINT' | oTranslate }}</button>

[emilio-martinez]

@denislamela exactly. Vertical align does the trick. That said, some icons shift a bit, so vertical-align: middle will not necessarily work exactly right all the time.

[jelbourn]

The question here is "which is the right component for a button containing both text and an icon?", and then we need to make sure that it behaves as expected.

[baktash93]

I actually figured out a way (especially for md-raised-button, since for an non md-raised-button the icon and the text alignments are OK). All you have to do is to wrap the md-icon and the text part under another div - where the div is a flex and has a the following properties:

.your-flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-contents: center;
}

Also to provide a bit of distance between the text and the icon, I added 8px margin-left to the text element.

Note: For convenience, I have used the same CSS layout styles as in Angular material v1.x.x.

[layout="row"] {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row; 
}

[layout-align="center center"]{
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    max-width: 100%;
}

And the button HTML markup looks like the following:

<button md-button md-raised-button>
    <!-- here is the trick by applying the flex styles on this wrapper -->
    <div layout="row" layout-align="center center">
        <md-icon> settings</md-icon>
        <div class="margin-left-8dp">Settings</div>
    </div>
</button>

[angular-automatic-lock-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.}