title: Decrease height of mat-button-toggle to match buttons
body: <p>I got an Angular Flex-Layout row which contains some buttons and a <code>mat-button-toggle-group</code>. Unfortunately, the <code>mat-button-toggle-group</code> is somewhat bigger than the buttons and I would like to have them all on the same height / line-height.</p>
  
  <p>This is hot it looks currently:
  <img src="https://i.imgur.com/OCDnw6i.png" alt="Screenshot"></p>
  
  <p>Tried to meddle with the css classes of <code>mat-button-toggle-group</code> and others, but only got to so far as to reduce the button height while the content stayed the same.</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;div fxLayout="row wrap" fxLayoutAlign="space-between end"&gt;
      &lt;div&gt;
          &lt;div fxLayout="row wrap" fxLayoutAlign="space-between end"&gt;
            &lt;div class="control-buttons"&gt;
              &lt;button
                mat-stroked-button
              &gt;
                &lt;i class="material-icons"&gt;skip_previous&lt;/i&gt;
              &lt;/button&gt;    
              ( more buttons )
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div fxLayout="row wrap" fxLayoutAlign="space-between end"&gt;
              &lt;mat-button-toggle-group multiple&gt;
                    &lt;mat-button-toggle
                      value="random"
                    &gt;
                      &lt;i class="material-icons"&gt;
                        shuffle
                      &lt;/i&gt;
                      &lt;span class="only-on-big-screen"&gt;
                        random
                      &lt;/span&gt;                
                    &lt;/mat-button-toggle&gt;    
                    ( more buttons )
                &lt;/mat-button-toggle-group&gt;
            &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>