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>

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;
}

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

<button mat-flat-button color="green"> Done button>

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.