I came across a query regarding this matter on another platform:
How can the font size of mat-menu-item be changed to small in Angular?
Unfortunately, the solution provided did not work for me.
I attempted to implement the suggested code in my Angular application, but the font size of mat-menu-item remained unchanged.
SCSS
.mat-menu-item{
font-size: 9px;
}
Markup
<button [matMenuTriggerFor]="menu" mat-button>Options</button>
<mat-menu class="mat-menu" #ServicesButton #menu="matMenu">
<button class="mat-menu-item" mat-menu-item>Option 1</button>
<button class="mat-menu-item" mat-menu-item>Option 2</button>
<button class="mat-menu-item" mat-menu-item>Option 3</button>
<button class="mat-menu-item" mat-menu-item>Option 4</button>
</mat-menu>
I also tried the following approach
<mat-menu class="mat-menu" #ServicesButton #menu="matMenu">
<button style="font-size: 9px;" mat-menu-item>Option 1</button>
<button style="font-size: 9px;" mat-menu-item>Option 2</button>
<button style="font-size: 9px;" mat-menu-item>Option 3</button>
<button style="font-size: 9px;" mat-menu-item>Option 4</button>
</mat-menu>
Is there an alternative way to achieve the same effect by utilizing regular HTML like
<li>Option 1</li><li>Option 2</li>.mat-menu-item?