Добавьте иконку в правый угол мат-меню с помощью Angular 6

Question

Я использую mat-menu.

<mat-menu #appMenu="matMenu" yPosition="above">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>

Я хочу щелкнуть по значку more_vert, поверх него должно открыться мат-меню. и значок должен быть добавлен в правом углу mat-menu На этом изображении правый верхний угол должен быть значком и помещаться поверх значка more_vert.

Может кто-нибудь помочь мне, как это сделать.

Добавлен код для таблицы. В качестве mat-menu присутствуют данные таблицы.

 <table class="table">
          <thead>
            <tr>
              <th>Data 1
              </th>
              <th>Data 2
              </th>
              <th>Data 3
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of Data</td>

              <td>
              {{data.val1}}
              </td>
              <td>
               {{data.val2}}
              </td>
              <td>
                      <mat-menu #appMenu="matMenu">
                          <mat-icon>close</mat-icon>
                          <button mat-menu-item>Settings</button>
                          <button mat-menu-item>Help</button>
                        </mat-menu>

                        <button mat-icon-button [matMenuTriggerFor]="appMenu">
                          <mat-icon>more_vert</mat-icon>
                        </button>
              </td>
            </tr>
          </tbody>
        </table>

Answer 1

Для достижения ожидаемого результата используйте опцию ниже

component.ts

<mat-menu #appMenu="matMenu" yPosition="above">
  <mat-icon class="icon">close</mat-icon>
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>

component.css:

mat-icon {
  float: right;
  margin-right: 10px;
}

.icon {
  position: relative;
  top: 14px;
  right: -10px;
  z-index: 9999;
}

style.css:

.cdk-overlay-container {
  position: relative;
  top: -70px;
}

пример кода для справки - https://codesandbox.io/s/k98pz5l98r