Угловой материал 2 пространство между мат-кнопка для мат-меню

Question

Я пытаюсь создать интервал внутри моего mat-button между текстом кнопки (span) и значком кнопки (fa-icon), который будет отображать мой mat-menu при нажатии. Я пытаюсь, чтобы это выглядело так:

Я не могу заставить его работать вообще.

Вот мой код:

<td mat-cell *matCellDef="let Participant">
  <button mat-button [matMenuTriggerFor]="participantStatusMenu" class="participantStatusBtn">
    <span>{{Participant.status | participantStatus}}</span>
    <fa-icon class="" [icon]="['fas', 'angle-down']" size="lg"></fa-icon>
  </button>
  <mat-menu #participantStatusMenu="matMenu" class="participantStatusMenu">
    <button *ngIf="Participant.status !== 1" mat-menu-item>{{1 | participantStatus}}</button>
    <button *ngIf="Participant.status !== 2" mat-menu-item>{{2 | participantStatus}}</button>
    <button *ngIf="Participant.status !== 3" mat-menu-item>{{3 | participantStatus}}</button>
  </mat-menu>
</td>

Answer 1

Я достиг этого путем:

/deep/ .mat-button-wrapper {
  width: 100%;

  span {
    float: left;
  }

  fa-icon {
    float: right;
  }
}