Customize angular material mat-menu-item to show items smaller in size (both width and height)

angular angular-material-7
svijay.aug12 picture svijay.aug12 · Mar 13, 2019 · Viewed 7.6k times · Source

I am working on an angular application using angular material components. In a grid, I have inline actions that should be supported (which can edit, delete and many more actions).

Currently when I embed the mat-menu component in the grid, the items list show very large size menu-items. I want to customize the size of the menu item (both in terms of its width and height).

Is there anyway to do this.

Current behavior:

enter image description here

Expectation:

enter image description here

Also, I am looking for the drop down menu as shown in the screenshot below (Menu drop item highlighted in green border. We can notice that the dropdown menu comes clean exactly below the icon and forms a clear box to show the menu items.)

enter image description here

However, in the default menu, there is no clear highlight or borders against the dropdown menu selected.

For example, as I have implemented below, the dropdown menu below the profile picture is rendered as below. Comparing this to the previous screenshot, the previous one look much more cleaner.

enter image description here

Code#

<button mat-icon-button [matMenuTriggerFor]="profileMenu" *ngIf="userIsAuthenticated">
    <!-- <i class="fa fa-user white-icon" aria-hidden="true"></i> -->
    <img class="avatar" src="../../assets/1.jpg">
  </button>

  <mat-menu #profileMenu="matMenu">
    <button mat-menu-item routerLink="/profile"> <i class="fa fa-user" aria-hidden="true"></i> Profile </button>
    <button mat-menu-item (click)="onLogout()"> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout </button>
  </mat-menu>

Changes after adding CSS classes

::ng-deep .mat-menu-content {
  width: 200px !important; 
  height: 120px !important; 
}

enter image description here

Answer

Marshal picture Marshal · Mar 13, 2019

The following CSS will accomplish what you need.

::ng-deep .mat-menu-content {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.mat-menu-item{
  line-height:35px;
  height:35px;
}

Stackblitz

https://stackblitz.com/edit/angular-uddgqx?embed=1&file=app/menu-overview-example.css

Related questions

Angular Material multi Select

I'm after a bit of advice with using Angular Material 7 multi selects. The documentation doesn't help that much with what I'm trying to do. Bit of a background on what I'm trying to do. So we are creating a record …

Read More
How to change toggle icon of mat-expansion-panel?

The default icon for toggling a mat-expansion-panel is >. Setting hideToggle true just hides the toggle icon. Is there any way to change it? I found nothing in the official documentation. I want to use + or - icon if the …

Read More
How Can I customize mat-form-field in disabled state

I am trying to customize the angular material mat-form-field : I was able to customize the underline border using : ::ng-deep.mat-form-field-ripple { background-color: yellow; } now I am trying to customize the underline border in the disabled state to be solid instead of …

Read More