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: 
@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;
}

```
As others have mentioned, you need to style the internal classes of mat-slide-toggle (mat-slide-toggle-bar, mat-slide-toggle-thumb, etc). However, /deep/ and ::ng-deep are deprecated, so you shouldn't be using those. One option is to set global styling that is more specific than the default styling on the component. So in a global style file, you could do something like this:

```
mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-bar {
  height: 8px;
  width: 26px;
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-thumb {
  height: 14px;
  width: 14px;
}

//...etc

```

Combining the component name and class name gives more specificity than the mat-slide-toggle default styling, so it overrides it.

References:

* <https://material.angular.io/guide/customizing-component-styles#styling-overlay-components>
* <https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep>