Summary
When setting up a simple angular material project with typography selected, and following the documentation, I'm left asking: what is the appropriate way to customize typography in Angular 16?
Details
I created a simple angular app that enabled typography and set up scss stylesheets.
I want to control the typography settings in the app and so in my styles.scss I added:
$my_typography: mat.define-typography-config(
$headline-1: mat.define-typography-level(40px, 20px, 900),
);
The large font here is for my testing, to see that it's working.
And then I include it on the theme declaration as the documentation states:
$my-app-theme: mat.define-light-theme((
color: (
primary: $my_app_primary,
accent: $my_app_accent,
warn: $my_app_warn,
),
typography: $my_typography
));
And ng added this to my body tag:
<body class="mat-typography">
So when I try to run this in my app.component.html:
<h1>Heading 1</h1>
The Roboto 700(bold) 32px Normal Black font is rendered.
How do I configure customization for the headings with angular material typography?
