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

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 2

I was specifically interested in changing the color of the frame around the checkbox and the label text. This worked for me:

div.mat-checkbox-frame {
    border-color: red;
}

span.mat-checkbox-label {
    color: red;
}

Answer 3

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

Answer 4

Use this on your css.

::ng-deep .mat-primary .mat-pseudo-checkbox-checked {
    background: red;
}

You should use ::ng-deep otherwise it will not work.

On your Html, use like this,

<mat-form-field>
  <mat-select placeholder="values" [formControl]="val" multiple>
    <mat-option *ngFor="let v of values" [value]="v">{{v.text}}</mat-option>
  </mat-select>
</mat-form-field>

Answer 5

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

/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 6

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #005691;
  }