Question: I am new to angular 2 and material design.
I would like to know how to style the slide-toggle button to be smaller.

```
 <div class="example-section">
  <mat-slide-toggle class="line-toggle"
    <span class="font-size-12">Slide Me</span>
  </mat-slide-toggle>
</div>

```

The css is as below

```
  .example-section {
  display: flex;
  align-content: center;
  align-items: center;
  height: 18px;
  margin-top: -12px;
}
 .line-toggle{
  height: 10px;
  line-height: 8px;
 }

```

I would like to decrease the size of the button and reduce the height of the slider.

Answer: 
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?](https://stackoverflow.com/questions/43690291/how-to-overwrite-angular-2-material-styles) 

Related Angular Documentation: <https://angular.io/guide/component-styles#!#-deep->
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;';
        }
    }

```