垫子按钮之间的垫子按钮之间有角材料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;
  }
}