Angular Material doesn't apply text styling to html text elements?

Question

Is it normal, that Angular Material doesn't apply styling to normal html text elements such as h1 and p?

    <h1>Hallo</h1>

    <p>Test paragaph</p>

    <button mat-raised-button>Click me!</button>

Looks like this for me:

:

Even though I'm using the a theme, my styles.scss looks like this:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

How do make text elements look like material elements?

Answer 1

By 'look like material elements', I presume you want the roboto font.

Have you in your style.css:

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

Answer 2

You might need to import the font via the link or by importing it into your .css or .scss file. It is not always done automatically unless you've added Angular material via the ' ng add ' method.

Answer 3

if you cannot imported the file .css or .scss file than you can add the css link in index.html and use all over the project.

<head>
     <link href="material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> 
</head>

text you can apply your css on bellow text elements.

<input id="name" name="name" placeholder="Enter to text" type="text">