1

Is it possible to customize mat-menu in angular?

I have to set this arrow (in red circle) in left side of word (green circle)

image

Here is my html:

<span class="material-symbols-outlined cursor-pointer" [matMenuTriggerFor]="settings"> settings </span>
    <mat-menu #settings="matMenu" xPosition="before">
        <button mat-menu-item [matMenuTriggerFor]="candidats">Candidats</button>
        <button mat-menu-item [matMenuTriggerFor]="clients">Clients</button>
        <button mat-menu-item [matMenuTriggerFor]="permanents">Permanents</button>
        <mat-menu #candidats xPosition="before">
            <button mat-menu-item>Candidats</button>
            <button mat-menu-item>Clients</button>
        </mat-menu>
        <mat-menu #clients xPosition="before">
            <button mat-menu-item>Candidats</button>
            <button mat-menu-item>Clients</button>
        </mat-menu>
        <mat-menu #permanents xPosition="before">
            <button mat-menu-item>Candidats</button>
            <button mat-menu-item>Clients</button>
        </mat-menu>
    </mat-menu>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Maxim Lungu
  • 11
  • 1

1 Answers1

1

Yes, it is possible. We just need to override css for mat-menu-submenu-icon class

There is a demo https://stackblitz.com/edit/angular-ivy-m1zkmv?file=src%2Fapp%2Fapp.component.ts

gazibo
  • 51
  • 1