Components: Buttons with an icon and text are not up to spec

[calebegg]

The icon needs to be 18x18 and have 8px of space to the right of it, per:

https://material.io/design/components/buttons.html#specs

Here's what I used:

.mat-button-wrapper .mat-icon {
  height: 18px;
  width: 18px;
  line-height: 18px;
  margin-right: 8px;
}

[marvinderksen]

In addition to that we need to reduce the button's left padding to 12px (e.g. by applying a left margin of -3px to the icon).
Should the font size of the icon be reduced to 18px?

[arlowhite]

I was going to create a separate issue for this, but this one seems related.

MatButton with icon & text is not documented on https://material.angular.io/components/button/overview

It's not clear whether developers should use a <span> around the label text or not and this choice affects the spacing between icon & text. I realize this is an artifact of how HTML works, but it should be documented or corrected by Material CSS.

Spacing Reduced:
In these cases, HTML does not render a space between icon & text.

<button mat-raised-button>
  <mat-icon>favorite</mat-icon>
  <span>Favorite</span>
</button>

<button mat-raised-button>
  <mat-icon>favorite</mat-icon>Favorite
</button>



md5-5029f9545f98130326508f5af88ad9e7



<button mat-raised-button>
  <mat-icon>favorite</mat-icon>
  Favorite
</button>



md5-4ed74057faebd9e6c5dacf15c23d2622



<button mat-raised-button>
  <mat-icon>favorite</mat-icon>
  <span> Favorite</span>
</button>

[meta72]

@calebegg I used your workaround but had to exclude mat-fab, mat-mini-fab and mat-icon-button.

:not(.mat-fab):not(.mat-mini-fab):not(.mat-icon-button) > .mat-button-wrapper .mat-icon,
:not([mat-fab]):not([mat-mini-fab]):not([mat-icon-button]) > .mat-button-wrapper .mat-icon {
    height: 18px;
    width: 18px;
    line-height: 18px;
    margin-right: 8px;
    margin-left: -4px;
}