Angular material mat-slide-toggle change toggle icon css

Question

I am trying to change the material sliding toggle icon like the following icon below:

and when it's not active:

Is it possible?

Answer 1

you can customize it by CSS ver easy

.mat-slide-toggle .mat-slide-toggle-thumb {
width: 13px!important;
height: 13px!important;
background-color: #24c368 !important;
box-shadow: none !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-65%, -57%);
border-radius: 3px
}

and

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color: #ececec !important;
width: 32px!important;
height: 16px!important;
border: 1px solid #24c368;
border-radius: 3px!important;
}