feat(Button): `mat-inline` styles to match Material button w/ icon specs

[emclaug2]

Feature Description

It would be nice to add some styles to a mat-icon within a mat-button so that it more closely matches the design specs found in Material Design. This could potentially take the form of a new attribute, mat-inline, placed on a mat-button.

This is an image of what I'm imagining a regular mat-button compared against a mat-inline mat-button would look like:

Sample Usage

<button mat-flat-button mat-inline color="accent">
  <mat-icon>account_circle</mat-icon>
  W/ Inline
</button>

Potential Implementation

.mat-button-base[mat-inline] {
    .mat-button-wrapper {
        display: flex;
        align-items: center;
    }
    .mat-icon {
        height: 18px;
        width: 18px;
        font-size: 18px;
        margin: 0 8px 0 -4px;
    }
}

[dir='rtl'] .mat-button-base[mat-inline] .mat-icon {
    margin: 0 -4px 0 8px;
}

Use Case

Whenever a user is creating an icon button, a user wouldn't have to refer to the material documentation & have to add these styles manually within their projects.

It helps to ensure alignment with Material's specs.

[huayunh]

To build on the idea, maybe something like this would work too:

<!-- mat icon at the start -->
<button>
    <mat-icon start-icon>icon_name</mat-icon>
    text
<button>

<!-- mat icon at the end -->
<button>
    <mat-icon end-icon>icon_name</mat-icon>
    text
<button>

[wagnermaciel]

This will be fixed in the new MDC Button (located in the material-experimental folder). Here is an example: https://material2-dev.firebaseapp.com/mdc-button

[emclaug2]

This will be fixed in the new MDC Button (located in the material-experimental folder). Here is an example: https://material2-dev.firebaseapp.com/mdc-button

Thanks @wagnermaciel I wasn't familiar with MDC components before this; do you know if is this something that would eventually be integrated into the comp lib directly?

[wagnermaciel]

Yep, the MDC components will eventually become the new defaults

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[amysorto]

Icons are vertically aligned within buttons in the new MDC based components coming soon in v15. Closing this bug.