angularangular-materialangular-material-8

Angular material change tick color inside mat-checkbox

enter image description here

I'm trying to change the tick color inside the mat-checkbox from white to black, but I cannot find the CSS class for the tick mark, anyone please help?

Solution

  • Use DevTools in any browser and select the HTML element you want to modify, You will find which CSS Classes are applying to this specified HTML element.

    In your case Iif you'll go inside the .mat-checkbox-background you'll see that the check icon is a path element and it's color is set by stroke: #FFFFFF!important; CSS property, Hence the class that you should modify is mat-checkbox-checkmark-path

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

    you can use the code above in your component.css file Check ::ng-deep

    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.

    Ref