How to increase the width of the mat-menu-item?

<div fxHide fxHide.xs="false" fxHide.md="true">
<button mat-icon-button [matMenuTriggerFor]="menu" class="my-menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let menu of repoService.toolbarMenu" class="mr-4" (click)="repoService.onToolbarClick(menu)"
class="notifications-dropdown">

<mat-icon *ngIf="menu.icon" aria-label="menu.key" class="mr-4">{{menu.icon}}</mat-icon>
<span class="notification-row">{{menu.displayKey | translate}}</span>

</button>
</mat-menu>


Css File


.mat-menu-panel.notifications-dropdown {
max-width:none;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
overflow: visible;
}

.notification-row{
width: 424px;
}

I have already tried this, but it doesn't work for me!

md-menu override default max-width in Angular 2

Continue reading...