Angular material design - how to add custom button color?
Solution 1
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.
Solution 2
You can add any color like below
<a mat-mini-fab color="success" routerLink=".">link</a>
.mat-success {
background-color: green;
color: #fff;
}
Solution 3
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;
}
Solution 4
This answer is in the context of an angular 5.1.1 project using angular/cli and angular material 5.1.
The mat-... seems to inherit its color from the parent so if you surround with a span or div and apply the color there it should fall through. In my particular use case we wanted to dynamically set the color of icons. Our initial implementation and new implementation are below.
This class assignment will override the mat-icon class. It appears that this use to work but does not anymore:
<mat-icon [class]="custom-class">icon name</mat-icon>
Now you can wrap:
<span [class]="custom-class"><mat-icon>icon name</mat-icon></span>
The first case lead to the words "icon name" colored as desired but no icon. The second case lead to the desired behavior.
Solution 5
Using a stylesheet at the referenced at component level
.mat-button, .mat-raised-button{
background-color:red;
}
Note: Declare the stylesheet reference at the component level. LIVE DEMO
Shaniqwa
"What ever you do, do it well. Do it so well that when people see you do it they will want to come back and see you do it again and they will want to bring others and show them how well you do what you do". -Walter Elias Disney :)
Updated on July 09, 2022Comments
-
Shaniqwa almost 2 years
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"
? -
Lars over 6 yearsIf you just want to assign a string, you don't need binding:
color="success"
. -
Gopi about 6 yearsYeah the purpose here you can assign any "string" values , that will generated as CSS Class, with that we can customize required color, like the above one. I have assigned string "Success" and it generated mat-success as a class.
-
Maverik about 4 yearsExcellent answer. Very simple and very effective. Thank you Vishnudev and Gopi
-
Abhishek Sharma almost 4 yearsThank you very much! Easiest to follow!
-
1252748 over 3 yearsThis is completely amazing, I had no idea you could do this. Thank you.
-
Karol Pawlak almost 3 yearsWow. This was extremely helpful!
-
Sachith Rukshan over 2 yearsthis is the correct answer
-
Joe Firebaugh about 2 yearsYou, my friend, have made me super happy with this hint. :)