title: How to overwrite mat-slide-toggle/ overwrite Css in components
body: <p>I have a component which is Sample1.html.component which contains mat slide toogle, I've added a scss but it is not taking effect , is this because of the default of angular material? Thanks.</p>
  
  <p>If it is toggled and checked the color of it should be #56ff00 like on the scss below.</p>
  
  <h1>Angular toogle</h1>
  
  <pre><code>&lt;mat-slide-toggle #relayToggle  [checked]="hasBeenChecked" labelPosition="before" (change)="relayChanged($event)"&gt;
        Toggle
  &lt;/mat-slide-toggle&gt;
  </code></pre>
  
  <h1>scss</h1>
  
  <pre><code>:host {
    @include full-width();
  
    .mat-slide-toggle.mat-checked {
  
      &amp; .mat-slide-toggle-thumb {
        background-color: #56ff00 !important;
      }
  
      &amp; .mat-slide-toggle-bar {
        background-color: #56ff008a !important;
      }
    }
  </code></pre>