I have some buttons which should be larger then the normal size. I found some code for previous versions:
$my-custom-input: mat.define-typography-level(
$font-family: 'Roboto',
$font-weight: 400,
$font-size: 1rem,
$line-height: 1,
$letter-spacing: 'normal'
);
/* Merge custom configs into existing config */
$my-typography-config: map.merge(
mat.define-typography-config(
/* 'button'-property will work out of the box */
$button: $my-custom-button
),
);
but define-typography-level
is not defined anymore. How can I do this in the newest version without just overriding css?
A solution without resorting to mat-typography
is to add this in your styles.scss
:
.big {
--mdc-text-button-label-text-size: 1.5rem;
}
A button with larger text would then be styled as follows:
<button class="big" mat-button>The Big Button</button>
Good luck with your project.