How to style the angular2 material slide-toggle button

I've found you can use /deep/ in the css but you also have to target the specific classes.

/deep/ .mat-slide-toggle-bar {
  height: 7px !important;
}
/deep/ .mat-slide-toggle-thumb {
  height: 10px !important;
  width: 10px !important;
}

Something else to keep in mind is viewEncapsulation because deep allows you to break this convention since the styles are set in such a way with Angular that they are applied inline.

Related stack post: How to overwrite angular 2 material styles?

Related Angular Documentation: https://angular.io/guide/component-styles#!#-deep-

@tallgeese117 's answer is really very helpful. I would like to add few more lines of code to the their answer so that it will display the toggle in the required size and look:

/deep/ .mat-slide-toggle-bar {
  height: 7px !important;
  width: 28px !important;
}

/deep/ .mat-slide-toggle-thumb {
  height: 10px !important;
  width: 10px !important;
}

/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(18px,0,0) !important;
}

/deep/ .mat-slide-toggle-thumb-container {
    width: 12px !important;
    height: 12px !important;
    top: -2px !important;
}

I used the solution provided by @tallgeese117 above. But in VScode, the CSS file was showing in red (\deep\), which was annoying. I couldn't find a way to ignore this css lint check. Thus I tried an alternative (altering css dynamically). I am pasting it below for others:

    ngOnInit() {
        let eleArray = document.getElementsByClassName('mat-slide-toggle-content');
        for(let i = 0 ; i < eleArray.length; i++) {
          // @ts-ignore
          eleArray[i].style.cssText = 'font-size:6vw;';
        }
    }