How to customize Angular-Material slide toggle

Question

I need to customize the colour, height and width of the mat-slide-toggle :

<mat-slide-toggle class="" [color]="color" [checked]="checked"   [disabled]="disabled"></mat-slide-toggle>

Answer 1

You can override the inner classes of mat-slide-toggle (.mat-slide-toggle-thumb, .mat-slide-toggle-bar) to customize their color, height and width. Add these overrides to style.scss if you need it through your app, or to the css of your current component if the style needs to be scoped