title: Angular material adds extra space using add_outline button with flex layout
body: <p>Looks like an error in a library <strong>"@angular/material"</strong></p>
  
  <p>Or in CDN source</p>
  
  <pre><code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  </code></pre>
  
  <p>I am trying to arrange divs inside <strong>mat-toolbar</strong>, but when using inside icon tag an icon add_outline, I have an extra margin.
  Only the icon with name "add_outline". For example, in another screenshot is "menu", and no bugs..</p>
  
  <p><a href="https://i.stack.imgur.com/aJHqp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aJHqp.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/QrEI9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QrEI9.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;mat-toolbar-row style="display: flex; justify-content: space-between; align-items: center;"&gt;
  
      &lt;button mat-icon-button (click)="sidenav.toggle()" onclick="this.blur()"&gt;
          &lt;mat-icon&gt;menu&lt;/mat-icon&gt;
          &lt;/button&gt;
  
  
          &lt;span class="toolbar-title"&gt;{{title}}&lt;/span&gt;
  
  
          &lt;button mat-icon-button (click)="changeTitleButton('New')"&gt;
          &lt;mat-icon&gt;add_outline&lt;/mat-icon&gt;
          &lt;/button&gt;
  
      &lt;/mat-toolbar-row&gt;
    &lt;/mat-toolbar&gt;
  </code></pre>
  
  <p><strong>Current version:
    "@angular/material": "8.0.0"</strong></p>
  
  <p>But the same things with "@angular/material": "7.2.5"</p>