Changing the color of the angular material checkbox checkmark

Question

I've been having a really hard time finding a solution that makes the color of the checkmark in the angular material checkbox the color white. I tried changing between themes and have gone through all stack posts, but nothing seems to work. How can I get the checkmark to turn white?

<mat-checkbox class="buyItNowLabel" [(ngModel)]="buyItNowEnabled">Buy It Now Only</mat-checkbox>

Answer 1

I think something like this

in component.css

::ng-deep mat-checkbox.buyItNowLabel .mat-checkbox-checkmark-path {
    stroke: red !important;
}

in styles.css

mat-checkbox.buyItNowLabel .mat-checkbox-checkmark-path {
    stroke: red !important;
}

if you want to replace color for all of the checkbox you can change the selector to

in component.css

::ng-deep mat-checkbox .mat-checkbox-checkmark-path {
    stroke: red !important;
}

in styles.css

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

Answer 2

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

::ng-deep .mat-checkbox-checked .mat-checkbox-background {
    background-color: #fa3131 !important;
}

::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
    border-color: #ff6f00 !important;
    background-color: #ff6f00 !important;
}

::ng-deep mat-checkbox .mat-checkbox-checkmark-path {
    stroke: white !important;
}

Answer 3

Can use below CSS:

::ng-deep mat-checkbox .mat-checkbox-checkmark-path {
    stroke: {color} !important;
}