DEV Community

Cover image for Custom colour for angular material components
Siddeshwar Navaneetharan
Siddeshwar Navaneetharan

Posted on

Custom colour for angular material components

Problem

So, you have an angular material component, say a chip or a button like so:

<button mat-flat-button> Done button>
Enter fullscreen mode Exit fullscreen mode

The designs provided to you show that the background colour of the button should be green and the text should be white.
You frantically search the web for a solution. Look no further !

Solution

In your corresponding styling file (.css or .scss), include the following style selector:

.mat-green {
 background-color: green;
 color: white;
}
Enter fullscreen mode Exit fullscreen mode

And then, in your .html file, simply set the color input attribute to green as below:

<button mat-flat-button color="green"> Done button>
Enter fullscreen mode Exit fullscreen mode

And voilà ! There you have it.

Note: You can provide any name to the css selector and prefix it with mat- and set the name to the color attribute.

Top comments (0)