Angular: Material Button follow the Header Size

Question

How do I make a mat-icon adhere to the header size? This is not working, the arrows are still very small.

  <h1>
    <button mat-icon-button (click)="testEvent()">
      <mat-icon>keyboard_arrow_up</mat-icon>
      <mat-icon>keyboard_arrow_down</mat-icon>
    </button>
  </h1>

SCSS:

h1 {
  @include font(400,40px);
}

Answer 1

Apply below css this will make a mat-icon adhere to the header size.

.mat-icon, .mat-icon-button{
  font-size: inherit;
}