custom typography does not apply

I am implementing my own typography theming in my angular application, I am trying to replicate the default configuration that comes with the typography components in react mui. At the moment I have already defined all the typography levels specified in the angular material theme customization guide version 15.0.1 and they are also already grouped in a typography configuration variable as specified in the documentation.

$typography-global-config: mat.define-typography-config(   $font-family: "Roboto",   /*this is a h1*/ $headline-5:
    mat.define-typography-level(
      $font-family: Nunito,
      $font-weight: 300,
      $font-size: 6rem,
      $line-height: 1.1167,
      $letter-spacing: -0.01562em,
    ),   /*healdine-6 is a h2*/ $headline-6:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 300,
      $font-size: 3.75rem,
      $line-height: 1.2,
      $letter-spacing: -0.008833em,
    ),   /*subtitle-1 is a h3*/ $subtitle-1:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 1rem,
      $line-height: 1.75,
      $letter-spacing: 0.00938em,
    ),
       /*subtitle-2 is a h4*/ $subtitle-2:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 500,
      $font-size: 0.875rem,
      $line-height: 1.57,
      $letter-spacing: 0.00714em,
    ),

  $body-1:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 0.875rem,
      $line-height: 1.5,
      $letter-spacing: 0.001071em,
    ),   $body-2:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 1rem,
      $line-height: 1.5,
      $letter-spacing: 0.00938em,
    ),   $caption:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 0.75rem,
      $line-height: 1.66,
      $letter-spacing: 0.03333em,
    ),    $button:  
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 500,
      $font-size: 0.875rem,
      $line-height: 1.75,
      $letter-spacing: 0.02857em,
    ), );

my problem occurs when I try to change the default font level of the toolbar component which is a headline-6 and I want to change it to a开发者_如何学运维 subtitle-2.

I call the default class that comes with this component and invoking the mat.typography-level mixin I try to configure it.

.mat-toolbar{   @include mat.typography-level($typography-global-config, 'subtitle-2'); }

when initializing the application the toolbar element still has the configuration of the headline-6 typography level which is the one used by default.

enter image description here

and it overwrites the configuration that I try to implement.

enter image description here

I would like to know how else I could change the typography level of this toolbar element, if any other mixin could work for me to make it work?