Angular Material Typography not being set correctly

Question

I am trying to implement Angular Material Typography however I have been having some difficulties and I am unsure what may be the issue.

I followed the instructions provided by Angular here however I run into a problem. The problem is that it looks like everything in the appliciation is being affected however some are being overridden with what looks like the default typography and I am unsure what I am doing wrong.

Typography created and used

$typography-configuration: mat-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
  $display-4: mat-typography-level(112px, 112px, 300),
  $display-3: mat-typography-level(100px, 56px, 400),
  $display-2: mat-typography-level(100px, 48px, 400),
  $display-1: mat-typography-level(100px, 34px, 400),
  $headline: mat-typography-level(100px, 32px, 400),
  $title: mat-typography-level(100px, 32px, 500),
  $subheading-2: mat-typography-level(100px, 28px, 400),
  $subheading-1: mat-typography-level(100px, 24px, 400),
  $body-2: mat-typography-level(100px, 24px, 500),
  $body-1: mat-typography-level(100px, 22px, 400),
  $caption: mat-typography-level(100px, 22px, 400),
  $button: mat-typography-level(100px, 14px, 500),
  $input: mat-typography-level(100px, 1.125, 400)
);

@include angular-material-typography($typography-configuration);

As you can see for the typography I set the first parameter (font size) to 100px on purpose so that I can see if everything on the application is effected.

Example #1: Material Button

For the Angular Material buttons (using 'mat-button' on the html element 'button') I see what I would expected as shown below. The text being set to 100px.

Example #2: Toolbar

For the Mat Toolbar however I do not see the font-size set to 100px. It looks like to me as the default font size as shown below is overriding the 100px size:

Example #3: Different Toolbar with multiple override

For the last example on another toolbar we can see that the 100px is added a few times overriding each other each time until the final one that overrides is also 20px so the font size is not 100px.

Details:

The Angular Material guide found here shows that we have 3 ways to use the typography within the application:

// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-typography);

// Override typography for a specific Angular Material components.
@include mat-checkbox-typography($custom-typography);

// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);

To my understanding the 3rd option I used should apply to anything under where you use class="mat-typography". So I added this to the body of the app as well as tried on the app-root. However as we see above only some of the application is affected correctly.

I tried adding it to smaller parts within the application in components but the outcome ends up the same.

I am not sure if my understanding is wrong and I am not using it correctly or if there is a problem somewhere else, I am assuming I am using it wrong however I cannot find any tutorials and examples created by others surprisingly.

I tried appending the classes myself to items such as class="mat-display-1" which seems to work fine however this doesn't seem like a good solution if I have to apply it everywhere throughout the app.

I would like if possible to have it apply throughout the application without having to set 100s of classes for typography alone.

I know I could do what is suggested here for apply to my own elements in sass, however I think they do it themselves.

Answer 1

This can occur from a few reasons relating to the order of sass files as well as their functions being called:

Reason:

The reasons this happens is due to the order of sass mixins being called by Angular Material's _theming.scss file which can be found at node_modules\@angular\material\_theming.scss.

The trouble mixin's are mat-core as well as angular-material-typography.

Using a Theme:

When you create a theme and call Angular Material's theming mixin mat-core it has a number of mixins that it includes.

@mixin mat-core($typography-config: null) {
  @include angular-material-typography($typography-config);
  @include mat-ripple();
  @include cdk-a11y();
  @include cdk-overlay();
  @include cdk-text-field();
}

As you can see in the code snippet above angular-material-typography mixin is indeed being called. When mat-core is being called is is looking for a typography configuration, if none is provided it will use a default configuration.

Using a Typography:

When you use only a typography file it is common to see something like below:

@import '~@angular/material/theming';

$typography-configuration: mat-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
  $display-4: mat-typography-level(112px, 112px, 300),
  $display-3: mat-typography-level(100px, 56px, 400),
  $display-2: mat-typography-level(100px, 48px, 400),
  $display-1: mat-typography-level(100px, 34px, 400),
  $headline: mat-typography-level(100px, 32px, 400),
  $title: mat-typography-level(100px, 32px, 500),
  $subheading-2: mat-typography-level(100px, 28px, 400),
  $subheading-1: mat-typography-level(100px, 24px, 400),
  $body-2: mat-typography-level(100px, 24px, 500),
  $body-1: mat-typography-level(100px, 22px, 400),
  $caption: mat-typography-level(100px, 22px, 400),
  $button: mat-typography-level(100px, 14px, 500),
  $input: mat-typography-level(100px, 1.125, 400)
);

@include angular-material-typography($typography-configuration);

As you can see from the code snippet above we created a typography configuration. As well as we call Angular Material's theming mixin typography-configuration. This will and does set the Typography for you however if you are using both an Angular Material Theme as well as Angular Material Typography you can have cases where your typography is being overridden. This is where the order is the problem.

Incorrect Implementation Causing your Issue:

@import './_theme-master.scss';
@import './theme-typography';
@include mat-core();

For example above: let's say in your styles.scss file you import a theme file containing setting a a themes palette and calling @include angular-material-theme($theme);. After this you decide to import your typography file. Your typography file has a typography configuration as well as you call @include angular-material-typography($typography-configuration); passing your configuration in.

Now after those are done you decided to call your mat-core. At this time your styles are created for your typography and you are happy, however, when calling mat-core Angular creates another set of styles using the default typography configurations. Now those are the newest styles and therefor your styles get overridden with the newest ones created.

Essentially your calling mixins look like this:

@include angular-material-typography($typography-configuration);
@include mat-core();

To fix your issue:

Instead load your typography configuration like this:

@include mat-core($typography-configuration);

Now for the issue of having many typography styles being created and overriding each other. This is most likely due to a file (probably your file which contains your typography) being imported multiple times causing the mixin to recall a few times. Try to place your typography file in 1 central space like calling the file once in styles.scss