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

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.

[angular-robot[bot]]

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