title: How to label both sides of a mat-slide-toggle control in Angular/Material 8?
body: <p>I'm using mat-slide-toggle on a settings screen to show various "this or that" options, e.g.:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="column"&gt;
          Automatically adjust display to screen
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;mat-label&gt;Off&amp;nbsp;&lt;/mat-label&gt;
          &lt;mat-slide-toggle formControlName="autoLayout"&gt;On&lt;/mat-slide-toggle&gt;
          &lt;mat-label&gt;&amp;nbsp;On&lt;/mat-label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="column"&gt;
          Choose preferred manual layout
      &lt;/div&gt;
      &lt;div class="column"&gt;                            
          Landscape&amp;nbsp;&lt;mat-slide-toggle formControlName="portrait"&gt;&lt;/mat-slide-toggle&gt;&amp;nbsp;Portrait
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/D64Ik.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D64Ik.png" alt="Screenshot from above code snippet"></a></p>
  
  <p>Note that the "On" which is part of the mat-slide-toggle is styled slightly differently to the Off/On which are outside of the control.</p>
  
  <p>Is there any way to replicate the internal label, on the left-hand side of the toggle AND the right-hand side, without having to do a load of CSS jiggery-pokery, which I've tried and failed to do already?</p>