custom Typography not working in angular material 15 after update

Question

This code worked great for customizing my typography in my entire application with angular 14

@use '@angular/material' as mat;
@import '@angular/material/theming';

$my-typography: mat-typography-config($font-family: "Lato, sans-serif");

@include mat.core($my-typography);

While updating Angular Material & cdk to 15 this error keeps happening:

Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Only 0 arguments allowed, but 1 was passed.
  ┌──> src\app\core\sass\cecom-theme.scss
11│ @include mat.core($my-typography);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
  ╵
  ┌──> node_modules\@angular\material\core\_core.scss
8 │ @mixin core() {
  │        ━━━━━━ declaration
  ╵
  src\app\core\sass\cecom-theme.scss 11:1  core()
  src\app\core\sass\cecom-theme.scss 11:1  root stylesheet

tried ng generate @angular/material:mdc-migration but it does not detect any issues in that file in particular.

score 3 · Answer 1 · answered Mar 23 '23 at 03:52

I did this:

@import '@angular/material/theming';
$custom-typography: mat-typography-config($font-family: '"Inter", "Helvetica Neue", sans-serif;');
@include mat-typography-hierarchy($custom-typography);
@include mat-core();

In other words, I moved the typography config argument out of mat-core and into this mat-typography-hierarchy mixin.

Details of which I found here: https://material.angular.io/guide/typography

And news that this was something new found here: https://rc.material.angular.io/guide/mdc-migration

score 2 · Answer 2 · answered Jan 06 '23 at 18:48

mat.core doesnt have any parameters in material angular 15

Call it only like this@include mat.core();

You need to pass typography config along with the primary and accent palette during theme definition

$mat-typography: mat.define-typography-config(
 $headline-1:
    mat.define-typography-level(
      48px,
      112px,
      400,
      $font-family: "Roboto",
      $letter-spacing: -0.01em
    ),
    ***
    );

$light-theme: mat.define-light-theme(
  (
    color: (
      primary: $light-primary-palette,
      accent: $light-accent-palette,
      warm: $light-warn-palette,
    ),
    // Only include `typography` and `density` in the default dark theme.
    typography: $mat-typography,
    density: $mat-density, // new property for fields density
  )
);

i didn't get that, i found nothing about that in the update documentation, why i have to declare the typography config in every single theme ? Have you any link to the documentation about that? Sry for that question but i searched the whole world for that :D — Woogielicious, Jan 30 '23 at 11:09

custom Typography not working in angular material 15 after update

2 Answers2