Angular material mat-slide-toggle change toggle icon

Question

I am using angular6 to layout my UI.

The default mat-slide-toggle button looks like this:

But i want the toggle button to look like below from the material-icons toggle_on , toggle_off

Is it possible to customize it?

Thanks a lot.

Answer 1

You could overwrite the default styling that is being applied to the Material slide toggle component. I must warn you, this is a bit hacky to do so. However, here's my take on your screenshot.

Styling that is needed for this:

.mat-slide-toggle-thumb {
    width: 10px !important;
    height: 10px !important;
    transform: translate(50%, 50%);
}

.mat-slide-toggle-bar {
  background-color: #000;
  border-radius: 15px !important;
  height: 16px !important;
}

.mat-slide-toggle-thumb-container {
  top: -2px !important;
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: #000;
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: #fff;
}

Unfortunately, some !important is needed to overrule the default styling that is set by Angular's Material CSS. You can view the example on StackBlitz.