position problem with mat-menu in Angular 12

Question

I created a mat-menu that works (the menu appears) but it does not appear below the button that makes it appear... Do you have any idea how to fix this problem? Should I fix it with CSS or with a component in npm install?

list-members.component.html

<button mat-icon-button [matMenuTriggerFor]="menu">
 <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" yPosition="below" xPosition="after">
 <button mat-menu-item (click)="deleteMember(member.IdProjectMember)">
  <mat-icon>dialpad</mat-icon>
  <span>Supprimer le membre</span>
 </button>
</mat-menu>

list members img

app.module.ts

import { NgModule } from '@angular/core';
import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';

@NgModule({
  exports:[
    MatDialogModule,
    MatInputModule,
    MatMenuModule,
    
  ],
  ...
  ],
  imports: [
    MatDialogModule,
    MatInputModule,
    MatMenuModule,

  ],
 
  providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Try adding Material Theme in angular.json :

        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
          "src/styles.scss"
        ],

Pre-built theme: https://material.angular.io/guide/theming#using-a-pre-built-theme