My theming Angular Material is:
@import "~@angular/material/theming";
$typography-config: mat-typography-config(
$button: mat-typography-level(
$font-size: 20px, // works
$line-height: 30px, // DOES NOT WORK !!!
$font-weight: 900, // works
),
);
@include angular-material-typography($typography-config);
Configurations of font-size and font-weight (buttons) works, but configuration of line-height (buttons) is ignored.
In browser console I see:
.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
box-sizing: border-box;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
outline: none;
border: none;
display: inline-block;
white-space: nowrap;
text-decoration: none;
vertical-align: baseline;
text-align: center;
margin: 0;
min-width: 64px;
line-height: 36px;
padding: 0 16px;
border-radius: 4px;
overflow: visible;
}
/* ... */
.mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button, .mat-fab, .mat-mini-fab {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 20px;
font-weight: 900;
}