Custom colour for angular material components

Problem

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

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:

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

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.