fixing custom material typography

src/theme.scss

@@ -1,21 +1,21 @@
-@import '@angular/material/theming';
+@use '@angular/material' as mat;
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
 
 // Create the new typography
-$custom-typography: mat-typography-config(
-  $headline: mat-typography-level(64px, 80px, 700),
-  $title: mat-typography-level(48px, 50px, 700),
-  $subheading-2: mat-typography-level(45px, 48px, 400),
-  $subheading-1: mat-typography-level(33px, 36px, 400),
-  $body-2: mat-typography-level(16px, 20px, 400),
-  $body-1: mat-typography-level(14px, 20px, 400),
+$custom-typography: mat.define-typography-config(
+  $headline-5: mat.define-typography-level(64px, 80px, 700),
+  $headline-6: mat.define-typography-level(48px, 50px, 700),
+  $subtitle-1: mat.define-typography-level(45px, 48px, 400),
+  $subtitle-2: mat.define-typography-level(33px, 36px, 400),
+  $body-1: mat.define-typography-level(24px, 26px, 400),
+  $body-2: mat.define-typography-level(14px, 20px, 400),
 ); // h5 & h6 aren't very useful, also what's their assigned mat name?
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-typography($custom-typography);
+@include mat.all-component-typographies($custom-typography);