Angular material design - how to add custom button color?

Question

I want to add my own custom colors, similar to "primary", "warn" etc. For example, I added a class for an orange background, but I use it as a class and not as a color attribute. It works, but the code looks a bit confusing.

<button md-raised-button         color="primary"         class="btn-w-md ml-3 orange-500-bg">           <i class="material-icons">description</i>           Deactivate </button> 

What do I need to do to add it as color="orange"?

Answer 1

You can add any color like below

 <a mat-mini-fab color="success" routerLink=".">link</a>

it generates the class with that value like 'mat-success' then create css for that class

.mat-success {      background-color: green;      color: #fff;  }