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?

score 0 · Answer 1 · answered Jan 11 '22 at 11:52

0

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

answered Jan 11 '22 at 11:52

Mohammad Babaei

473
6
16

1

thankyou so much, But You did the opposite of what I wanted – Shubham Shaw Jan 11 '22 at 12:36
1

I see, but I mean with this css classes you can do whathever you want – Mohammad Babaei Jan 11 '22 at 14:32
1

yes bro, thank you so much for this – Shubham Shaw Jan 12 '22 at 09:09

Angular material mat-slide-toggle change toggle icon css

1 Answers1