title: Text overlaps on mat-icon-button
body: <p>I'm trying to create navbar with Angular's mat-toolbar. I've added icons with mat-icon. When i tried to add labels for them, the text overlaps with the icons.
  <a href="https://i.stack.imgur.com/3vmHZ.png" rel="nofollow noreferrer">screen of the toolbar</a>
  html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-toolbar color="warn"&gt;
      &lt;mat-toolbar-row&gt;
          &lt;img src="/assets/img/logo.png" width="150"&gt;
          &lt;span class="example-fill-remaining-space"&gt;&lt;/span&gt;
          &lt;button mat-icon-button&gt;
              &lt;mat-icon&gt;home&lt;/mat-icon&gt;
              &lt;span&gt;home&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;button mat-icon-button&gt;
              &lt;mat-icon&gt;history&lt;/mat-icon&gt;
              &lt;span&gt;home&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;span&gt;
              &lt;mat-menu #appMenu="matMenu"&gt;
                  &lt;span&gt;language&lt;/span&gt;
                  &lt;button mat-menu-item&gt;ENGLISH&lt;/button&gt;
                  &lt;button mat-menu-item&gt;POLISH&lt;/button&gt;
                  &lt;button mat-menu-item&gt;ITALIAN&lt;/button&gt;
              &lt;/mat-menu&gt;
              &lt;button mat-icon-button [matMenuTriggerFor]="appMenu"&gt;
                  &lt;mat-icon&gt;language&lt;/mat-icon&gt;
              &lt;/button&gt;
          &lt;/span&gt;
      &lt;/mat-toolbar-row&gt;
  &lt;/mat-toolbar&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre class="lang-css prettyprint-override"><code>.example-fill-remaining-space {
      flex: 1 1 auto;
  }
  
  .mat-icon {
      font-size: 25px;
      height: auto !important;
  }
  
  .icon-text {
      display: flex;
  }
  </code></pre>