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"?

Simply put, you cant add `color="orange"`. You have to make your own theme to do that. — , Jul 17 '17 at 12:32

score 129 · Answer 1 · edited Apr 02 '20 at 06:27

129

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

edited Apr 02 '20 at 06:27

Vishnudev Krishnadas

10,679
2
23
55

answered Dec 28 '17 at 22:24

Gopi

1,425
2
10
6

6

If you just want to assign a string, you don't need binding: `color="success"`. – Lars Mar 11 '18 at 10:54
1

Yeah 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. – Gopi Apr 13 '18 at 19:52
Excellent answer. Very simple and very effective. Thank you Vishnudev and Gopi – Maverik Apr 29 '20 at 13:52
Thank you very much! Easiest to follow! – Abhishek Sharma Aug 13 '20 at 18:07
Wow. This was extremely helpful! – Karol Pawlak Sep 22 '21 at 12:25
this is the correct answer – Sachith Rukshan Jan 11 '22 at 09:26
2

This appears to no longer work as of material v15 – brt Mar 27 '23 at 21:29
This is an excellent answer, I had no idea that the class would be auto-created – James Woodall Apr 12 '23 at 09:46
2

For angular 15 I had to add !important. – Luca Carlon Apr 16 '23 at 11:54
@brt You just need to add !important like: `background-color: red !important;` – Allie Moosa Apr 24 '23 at 08:24

Andre Elrico · Answer 2 · 2023-05-15T15:37:12.283

30

For version 16 use this STACKBLITZ . (Thanks to Lucas Tesseron)

I have created styles for all mat-button types

STACKBLITZ DEMO

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

edited May 15 '23 at 15:37

answered Sep 27 '19 at 11:52

Andre Elrico

10,956
6
50
69

This is completely amazing, I had no idea you could do this. Thank you. – 1252748 Feb 09 '21 at 22:29
my god. you can just use ```mat-{custom-name}``` and it works perfect. That if you don't want to be constrains. – BAcevedo Sep 01 '22 at 23:48
3

now classes are changed to mdc-button, mat-mdc-button-raised and cetera FYI – Igor Kurkov Feb 28 '23 at 07:20
Here is an updated version for @angular/material 16.0.0 https://stackblitz.com/edit/oyd9fg?file=src/styles.scss – Lucas Tesseron May 12 '23 at 12:19
I don't know why in my Angular 16, I cannot apply those created colors. I can do it only by using `.mat-mdc-raised-button:not(:disabled)` selector and assign the color as important to overwrite the original one. – Woden Aug 02 '23 at 08:18
After several attemps, I still need to use `!important` to overwrite the original colors with the provided code. – Woden Aug 02 '23 at 08:25

score 21 · Accepted Answer · edited Jul 19 '19 at 08:53

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.

score 4 · Answer 4 · answered Jan 24 '18 at 13:05

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.

score 4 · Answer 5 · answered Oct 29 '20 at 08:06

4

you can use a class with background

example:-

CSS:-

.save-button {
  background: green;
}

HTML:-

<button mat-mini-fab class="save-button" >
       <mat-icon >save</mat-icon>
</button>

answered Oct 29 '20 at 08:06

user8211804

41
3

Poul Kruijt · Answer 6 · 2020-12-29T09:35:54.233

Because the template checker gives an error/warning when you are using custom colors, there is a hacky way around it. This is only for the real desperate people who like things to be strict strict strict and have proper hinting from the IDE :)

First step is to create your own ambient declaration. I've added mine to the polyfills.ts, because I'm a bit lazy:

declare module '@angular/material/core/common-behaviors/color' {
  interface CanColor {
    // @ts-ignore
    color: CustomThemePalette;
  }
}

The @ts-ignore is necessary, otherwise you'll get the following error:

TS2717: Subsequent property declarations must have the same type. Property 'color' must be of type 'ThemePalette', but here has type 'CustomThemePalette'.

Then you can define your custom theme palette:

import type { ThemePalette } from '@angular/material/core/common-behaviors/color';

export type CustomThemePalette = ThemePalette | 'secondary' | 'success' | 'alert';

Now finally you can use those custom colors in your template, and your IDE will hint them and notify you when you've mistyped them. Victory!

_{note: obviously things will go south this way, when material decides to change their CanColor interface or move it around, but I suppose it would be relatively easy to adapt to such changes}

You, my friend, have made me super happy with this hint. :) – Joe Firebaugh Apr 05 '22 at 15:08 — Joe Firebaugh, Apr 05 '22 at 15:08

score 3 · Answer 7 · answered Jul 17 '17 at 12:30

3

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

answered Jul 17 '17 at 12:30

Aravind

40,391
16
91
110

score 2 · Answer 8 · answered Mar 29 '23 at 19:18

2

Similar solution adapted for Angular 15:

.mat-mdc.mat-mdc-button.mat-orange { color: orange; }

or

.mat-mdc-button.mat-orange:not(:disabled) { color: orange; }

answered Mar 29 '23 at 19:18

Oktagram b.

31
2

Keep in mind that this solution works, because CSS is cascade. So in order to overwrite the styles provided by default, you have to have greater "weight" on your styles. That is why this solution works, adding more classes before the custom one you created adds to the "weight" of the style you want to enforce, thus making it more "important" than the default one. – Ivanp Apr 21 '23 at 08:25

shhdharmen · Answer 9 · 2022-05-27T07:22:37.357

For flat and raised buttons, a simple CSS should work as mentioned here.

But, to handle all variants (outline, simple, etc.) and all states (hover, focus, disabled, etc.) more complex setup is required.

I have created a stackblitz to show case the same.

If you want simpler setup, better approach would be to create another theme variant. For example, you can create a theme $custom-theme and have it applied under .custom-theme class. I have also created stackblitz to showcase the same.

score 0 · Answer 10 · answered Mar 02 '23 at 12:39

0

For current angular material v15 please take a look on this answer to setup custom themes with mixin variants Angular Material custom colors

answered Mar 02 '23 at 12:39

Igor Kurkov

4,318
2
30
31

Angular material design - how to add custom button color?

10 Answers10

Linked