Change size of the checkbox in mat-select multiple

Issue

I am currently building an angular application. I used mat-select in my project but checkboxes are not coming as expected. Did this using https://material.angular.io/components/select/overview

This is my code

<mat-select class="c-input" multiple>
   <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>

I search questions already on StackOverflow but didn't find a satisfying answer. I hope someone answers this.

Thank you in advance.

Solution

To change size of the checkbox, you need to edit this class .mat-pseudo-checkbox

.mat-pseudo-checkbox {
    width: 35px !important; //set your own size
    height: 35px !important;
}

And for manipulate the ✓ you can edit the mat-pseudo-checkbox-checked::after class:

.mat-pseudo-checkbox-checked::after {
    top: 12.4px !important;
    left: 1px !important;
    width: 24px!important;
}

Here is working example

Answered By - Alireza Ahmadi