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"?
You can change the color of the button only in the normal css way by defining a class for background color orange and using it as class attribute.
If you need to use it as color="orange". Then you need to create your own theme with the colors you need. Refer Theming your angular material app on how to do it. You can even make it custom for each element. Through customisation you can choose different themes based on elements
But still you wont be able to use it like color="orange", you can define orange as your primary or accent color and use it as color="primary" or color="accent" based on your need.
Theme can have only following items with different colors