How to change matcheckbox border color and background color

Question

In angular material 16 I am using the following code:

<mat-checkbox class="example-margin" color="primary"
                    [(ngModel)]="selectWorkers[i].isSelected" (change)="onChange($event, worker)">
                    <span class="worker-name">{{ worker.WorkerName}}</span> <span [ngClass]="isDarkMode?'worker-namedmode':'worker-namelmode'">({{worker.WorkeruserID}})</span>
                </mat-checkbox>

How to change unchecked checkbox border color white and checked tick mark and background color green in angular 16

Answer 1

For this, you can create a CSS file for the formatting, and use it like this:

<mat-checkbox class="example-margin custom-checkbox" color="primary"
          [(ngModel)]="selectWorkers[i].isSelected" (change)="onChange($event, worker)">
          <span class="worker-name">{{ worker.WorkerName}}</span> <span [ngClass]="isDarkMode?'worker-namedmode':'worker-namelmode'">({{worker.WorkeruserID}})</span>
        </mat-checkbox>

Example HTML:

.custom-checkbox {
border: 1px solid #ffffff;
color: #2ecc71;
background-color: #2ecc71;
}

.custom-checkbox.mat-checkbox-checked {
    border-color: #2ecc71;
}

.custom-checkbox.mat-checkbox-checked .mat-checkbox-inner-container {
    background-color: #2ecc71; 
}

.custom-checkbox .mat-checkbox-checkmark-path {
    stroke: #ffffff; 
}