https://i.sstatic.net/LHfOm.pngI am currently utilizing mat-menu component.
<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>
My objective is to have the mat-menu pop up above the more_vert icon when clicked, with an additional icon in the top-right corner of the mat-menuhttps://i.sstatic.net/RqKiU.png In the provided image, the new icon should be located at the top-right corner and overlay the more_vert icon.
I would greatly appreciate any assistance on how to achieve this.
Included below is the code for a table where the mat-menu is embedded within table data.
<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>