title: Angular Material 2 space-between mat-button for mat-menu
body: <p>I am trying to create spacing inside my <code>mat-button</code> between the button text (<code>span</code>) and the button icon (<code>fa-icon</code>) that will show my <code>mat-menu</code> when clicked. I'm trying to get it to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/1OABB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1OABB.png" alt="Expected result"></a></p>
  
  <p>I can't seem to get it working at all.</p>
  
  <p>Here's my code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;td mat-cell *matCellDef="let Participant"&gt;
    &lt;button mat-button [matMenuTriggerFor]="participantStatusMenu" class="participantStatusBtn"&gt;
      &lt;span&gt;{{Participant.status | participantStatus}}&lt;/span&gt;
      &lt;fa-icon class="" [icon]="['fas', 'angle-down']" size="lg"&gt;&lt;/fa-icon&gt;
    &lt;/button&gt;
    &lt;mat-menu #participantStatusMenu="matMenu" class="participantStatusMenu"&gt;
      &lt;button *ngIf="Participant.status !== 1" mat-menu-item&gt;{{1 | participantStatus}}&lt;/button&gt;
      &lt;button *ngIf="Participant.status !== 2" mat-menu-item&gt;{{2 | participantStatus}}&lt;/button&gt;
      &lt;button *ngIf="Participant.status !== 3" mat-menu-item&gt;{{3 | participantStatus}}&lt;/button&gt;
    &lt;/mat-menu&gt;
  &lt;/td&gt;
  </code></pre>