css - 用于垫子菜单的 Angular Material 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;
  }
}