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