Angular Material 2 space-mat-menu 的 mat-button 之间

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;
  }
}