在IE / Edge mat-slide-toggle按钮中，图标无法正常运行

Question

我已经进行了自定义设计，以设置切换按钮上的图标。

HTML：这是HTML代码：

 `<mat-slide-toggle class="pos-rel-toggle m-x-10 m-b-30" (click)=onStarclick()> `
 <mat-icon matSufffix class=" home toggle-icons"*ngIf="toggleBtn">home</mat-icon>
 <mat-icon matPrefix class="setting toggle-icons" *ngIf="!toggleBtn"> settings</mat-icon></mat-slide-toggle>

SCSS：scss在下面：

 ` .pos-rel-toggle { position: relative; }
 .toggle-icons {position: absolute; color: $white-color;font-size: 19px; z- index: 1;}
 .setting { top: 3px; right: 22px; }
 .home { top: 1px;right: 6px; }` 

ts：此处的TS：

   `onStarclick(){
    this.toggleBtn=!this.toggleBtn;
    this.toggleBtn? this.router.navigate(['/dashboard/setting']):this.router.navigate(['/dashboard'])
  }`

在这里，我添加了有关该问题的图像以及IE中的工作切换。

工作切换图像：

在IE / Edge中的问题：

工作切换：