title: Angular Material Typography not being set correctly
body: <p>I am trying to implement Angular Material Typography however I have been having some difficulties and I am unsure what may be the issue.</p>
  
  <p>I followed the instructions provided by Angular <a href="https://material.angular.io/guide/typography" rel="noreferrer">here</a> 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.</p>
  
  <h2>Typography created and used</h2>
  
  <pre><code>$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);
  </code></pre>
  
  <p>As you can see for the typography I set the first parameter (font size) to <code>100px</code> on purpose so that I can see if everything on the application is effected. </p>
  
  <h2>Example #1: Material Button</h2>
  
  <p>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.
  <a href="https://i.stack.imgur.com/AemVT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AemVT.png" alt="enter image description here"></a></p>
  
  <h2>Example #2: Toolbar</h2>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/sg2Qb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sg2Qb.png" alt="enter image description here"></a></p>
  
  <h2>Example #3: Different Toolbar with multiple override</h2>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/qnkxY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qnkxY.png" alt="enter image description here"></a></p>
  
  <h2>Details:</h2>
  
  <p>The Angular Material guide found <a href="https://material.angular.io/guide/typography" rel="noreferrer">here</a> shows that we have 3 ways to use the typography within the application:</p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p>To my understanding the 3rd option I used should apply to anything under where you use <code>class="mat-typography"</code>. So I added this to the <code>body</code> of the app as well as tried on the <code>app-root</code>. However as we see above only some of the application is affected correctly. </p>
  
  <p>I tried adding it to smaller parts within the application in components but the outcome ends up the same.</p>
  
  <p>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.</p>
  
  <p>I tried appending the classes myself to items such as <code>class="mat-display-1"</code> which seems to work fine however this doesn't seem like a good solution if I have to apply it everywhere throughout the app. </p>
  
  <p>I would like if possible to have it apply throughout the application without having to set 100s of classes for typography alone.</p>
  
  <p>I know I could do what is suggested <a href="https://material.angular.io/guide/typography#material-typography-in-your-custom-css" rel="noreferrer">here</a> for apply to my own elements in sass, however I think they do it themselves.</p>