Выровнять кнопку more_vert с правой стороны в Angular-материале

Question

Как настроить выравнивание кнопки more_vert по правой стороне заголовка? Я использую Angular 7 и Material UI.

 <mat-toolbar color="primary" class="mat-elevation-z10">
<span>
  <mat-icon>favorite</mat-icon>
  Derek Zoolander's Center for Models Who Can't Find Love
</span>
<button mat-icon-button [mat-menu-trigger-for]="menu">
  <mat-icon>more_vert</mat-icon>
</button>

Answer 1

Ключ должен был иметь <span class="example-spacer"></span> между вашим заголовком <span> и " more_vert " mat-icon.

полный HTML :

<mat-toolbar color="primary" class="mat-elevation-z10">

  <mat-toolbar-row>
    <mat-icon>favorite</mat-icon>
    <span>
      Derek Zoolander's Center for...
    </span>
    <span class="example-spacer"></span>
    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon class="example-icon" aria-hidden="false" aria-label="expand menu">more_vert</mat-icon>
    </button>
  </mat-toolbar-row>

</mat-toolbar>

Вы можете проверить рабочий пример здесь ...