Angular 材质 mat-slide-toggle 更改切换图标 css答案

【问题标题】：Angular material mat-slide-toggle change toggle icon cssAngular 材质 mat-slide-toggle 更改切换图标 css
【发布时间】：2022-01-11 11:40:16
【问题描述】：

我正在尝试更改材质滑动切换图标，如下图所示：

当它不活跃时：

有可能吗？

【问题讨论】：

标签： css angular angular-material material-design angular-material-7

【解决方案1】：

您可以通过 CSS 轻松自定义它

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

和

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

【讨论】：

非常感谢，但你做的与我想要的相反
我明白了，但我的意思是有了这个 css 类，你可以做任何你想做的事
是的，兄弟，非常感谢你