Button with icon and text in Material 15

Question

I hope its a simple question - how can I define a button with icon and text in material 15

<button mat-button>
  <mat-icon>keyboard_arrow_left</mat-icon>
  Back To Home
</button>

But it is not aligned

Answer 1

Found a solution for this issue. The reason for this is that button im Material are now bigger. Assigning icon this class will fix the issue:

.small-icon-button {
  width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  & > *[role='img'] {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;

    svg {
      width: 1rem;
      height: 1rem;
    }
  }

  .mat-mdc-button-touch-target {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
}