Changing the color of the angular material checkbox checkmark

Issue

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>

Solution

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

Answered By - Ashot Aleqsanyan