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