Angular material design - how to add custom button color?
You can add any color like below
<a mat-mini-fab color="success" routerLink=".">link</a>.mat-success { background-color: green; color: #fff;}
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
- A primary palette: colors most widely used across all screens and components.
- An accent palette: colors used for the floating action button and interactive elements.
- A warn palette: colors used to convey error state.
- A foreground palette: colors for text and icons.
- A background palette: colors used for element backgrounds.
I have created styles for all mat-button types
(add to your global styles)
.mat-button.mat-success,.mat-stroked-button.mat-success { color: #155724;}.mat-button.mat-success:hover,.mat-stroked-button.mat-success:hover { background-color: #f0fff3;}.mat-raised-button.mat-success,.mat-flat-button.mat-success,.mat-fab.mat-success,.mat-mini-fab.mat-success { color: #f0fff3; background-color: #155724;}.mat-icon-button.mat-success { color:#155724;}