How to create custom Angular Material mat-menu-items?

Issue

I would like to have menu items to appear in a fully customized way (especially with multiple lines of text, various font sizes and colors), however it seems to only display the first line of text. For instance:

<mat-menu>
  <div mat-menu-item>
    <div>Text1</div>
    <div style="font-size: 8px;">Text2</div>
  </div>

only shows "Text1", but not "Text2".

How can I do to make this work? Many thanks!

Solution

According to the Migrating to MDC-based Angular Material Components:

In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC).

There's why the demo I shared in the comment with Angular Material v16 is working, but for Angular Material v12 is not working.

Either you have to upgrade to Angular Material v15 (with Angular version 15) or customize your existing <mat-menu> and styling similar to MDC way.

<mat-menu #menu="matMenu">
  <div mat-menu-item>
    <div class="primary_text">
      <div>Text1</div>
      <div style="font-size: 8px;">Text2</div>
    </div>
  </div>
</mat-menu>

style.css

html {
  --mat-menu-item-label-text-size: 16px;
  --mat-menu-item-label-text-tracking: 0.03125em;
  --mat-menu-item-label-text-line-height: 24px;
  --mat-menu-item-label-text-weight: 400;
}

.mat-menu-item {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  position: relative;
  justify-content: flex-start;
}

.mat-menu-item .primary_text {
  -webkit-font-smoothing: antialiased;
  line-height: var(--mat-menu-item-label-text-line-height);
  font-size: var(--mat-menu-item-label-text-size);
  letter-spacing: var(--mat-menu-item-label-text-tracking);
  font-weight: var(--mat-menu-item-label-text-weight);
}

Demo @ StackBlitz

Answered By - Yong Shun