how to set color on text Angular Material

Question

I'm using Angular 5 with material.

I can use the property color on material element.

What's the equivalent way to set color on text?

For example:

<h1 class="mat-subheading-1" color="accent" >Via Del Corso, 100, ROMA</h1>

Does not work.

I don't want to implement a custom css class for that since I want to use the angular material theming.

Answer 1

You cannot do that because color is probably a specific input property to material components.

Take a look at Theming Docs

Once you have followed that you can easily do this below:

In your app.style.scss file include

@import '~@angular/material/theming';
@import './app.theme';

.accent-color {
  color: mat-color($accent) !important;
}

Then just use the class in your header like so:

<h1 class="mat-subheading-1 accent-color">Via Del Corso, 100, ROMA</h1>