How to style menu

Styles from the material/menu package can be customized using the menu-overrides mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example:
@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.menu-overrides((
    item-label-text-color: orange,
    item-icon-color: red,
  ));
}
You can find the full list of supported mixins and tokens below.

Tokens supported by menu-overrides

NameTypeBased on system token
container-shapeBase None
divider-bottom-spacingBase None
divider-top-spacingBase None
item-spacingBase None
item-icon-sizeBase None
item-leading-spacingBase None
item-trailing-spacingBase None
item-with-icon-leading-spacingBase None
item-with-icon-trailing-spacingBase None
container-elevation-shadowBase None
item-label-text-colorColor--mat-sys-on-surface
item-icon-colorColor--mat-sys-on-surface-variant
item-hover-state-layer-colorColor--mat-sys-on-surface
item-focus-state-layer-colorColor--mat-sys-on-surface
container-colorColor--mat-sys-surface-container
divider-colorColor--mat-sys-surface-variant
item-label-text-fontTypography--mat-sys-label-large-font
item-label-text-sizeTypography--mat-sys-label-large-size
item-label-text-trackingTypography--mat-sys-label-large-tracking
item-label-text-line-heightTypography--mat-sys-label-large-line-height
item-label-text-weightTypography--mat-sys-label-large-weight
Azure & Blue theme selected.