Can I change the color of Angular Material checkbox with some custom color and how?

Question

I'm trying to do this, but is looks like it is only possible to change it to primary or warn.

Answer 1

The proper way to control colors of Angular Material elements is to use differrent pallettes, but the functionality is limited. If you want more control, you can add custom CSS, and in most cases you will need to use ::ng-deep to force your styles to apply, for example:

::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: violet;
}

Here is a DEMO, where I changed the color of the border and background when it checked. You can follow this way to implement any styling you want.

If you're not familiar with ::ng-deep and don't really understand, when you need it, you can look through THIS short answer.

UPDATE 1

There is another one way via encapsulation disabling (thanks to @Ventura). It has a right to exist, but be careful if you decided to disable encapsulation, don't confuse with stylesheets, because it behaves differently from what you expect from default Angular logic regarding CSS.

For more info: https://coryrylan.com/blog/css-encapsulation-with-angular-components

SO answer: https://stackoverflow.com/a/54981478/6053654

UPDATE 2

The method is deprecated, see more info HERE or HERE.

Answer 2

You may use this:

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate, .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate {
    background-color: red !important; /* Red background for example */
}

Answer 3

You can use this code to change its box and its check icon:

/*  In case of using Angular 9+, Replace /deep/ with ::ng-deep */

/deep/ .mat-checkbox.mat-accent {
  .mat-checkbox-frame {
    border: 1px solid dodger-blue;
  }

  &.mat-checkbox-checked .mat-checkbox-background {
    background-color: white;
    border: 1px solid dodger-blue;
  }

  .mat-checkbox-checkmark-path {
    stroke: dodger-blue !important;
  }
}

Angular Material Version: "7.0.0"

Answer 4

These answers didn't work for me for indeterminate boxes. Following did:

::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
  background-color: #222d32 !important;
}