9

I'm creating a sample app using material design as per what I've learned so far, but I noticed that the out of the box fonts for the material design are different for different components. For the material title element within a material dialog, the title shows in a nice Roboto font but the material dialog content shows in Roman: enter image description here

Here's my html component for the dialog:

<h3 mat-dialog-title>{‌{title}}</h3>
<mat-icon color="primary">error_outline</mat-icon>
<mat-dialog-content>
    <ul>
        <li *ngFor="let error of errorMessages">
          {‌{error}}
        </li>    
      </ul>
</mat-dialog-content>

I don't want to have to create custom styles but would rather use the default styles associated with the element right out of the box. If I add

body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

to my gobal styles.css that fixes the font within the mat-dialog-content but I'd rather not have to do that.

Also, the icon is so tiny as you can clearly see out of the box. Is there a way to choose a larger icon set from the icons library at runtime? Thanks in advance!

ustad
  • 459
  • 1
  • 6
  • 21
  • I assume you have imported the fonts and font icons. Have you imported a predefined them in your application or are you theming it yourself? Fonts are applied by theming - if you aren't seeing the right font anywhere it's either because you haven't properly themed your application or because you have changed the font somewhere in style. – G. Tranter Oct 24 '18 at 13:57
  • Hi G.Tranter, thanks for your response, yes I've applied one of the OOTB themes in my global styles.css : @import '~@angular/material/prebuilt-themes/indigo-pink.css'; and have imported the icons in my index.html: That's it, no other custom styling as that is what I wanted to avoid anyhow. Thanks for your help! – ustad Oct 25 '18 at 15:01
  • 1
    The only other thing I can think of is to add the `mat-typography` class to your app's `` element. – G. Tranter Oct 25 '18 at 15:20
  • I'm still experiencing this issue with Angular 7 Material. – White hawk Feb 04 '19 at 15:34
  • Hi! any solution? – Joaquín Crippa Feb 07 '19 at 21:06

1 Answers1

3

Looks like the only way I can see from my research is by defining the body element within the global styles.css like so: 

 body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}
ustad
  • 459
  • 1
  • 6
  • 21