Set title icon in Angular Menu component

12 Sep 20253 minutes to read

You can customize the title for icon-based menu items in the Syncfusion Angular Menu component by using the beforeItemRender event.

This approach is useful when you want to provide descriptive tooltips for menu items that display only icons.

In the following example, the title for the settings icon is set dynamically using the beforeItemRender client-side event.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MenuModule } from '@syncfusion/ej2-angular-navigations'




import { Component } from '@angular/core';
import { enableRipple, closest } from '@syncfusion/ej2-base';
import { MenuItemModel, MenuEventArgs } from '@syncfusion/ej2-angular-navigations';

enableRipple(true);

@Component({
imports: [ MenuModule],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
            <div class="menu-section">
    <div class="menu-control">
        <ejs-menu [items]='menuItems' (beforeItemRender)='onBeforeItemRender($event)'>></ejs-menu>
    </div>
</div>
</div>`
})

export class AppComponent {
  
    public menuItems: MenuItemModel[] = [
        {
            id: 'settingIcon',
            iconCss: 'e-icons e-settings',
            items: [
                { text: 'Open',
                  items: [
                      { text: 'Sub Option1' },
                      { text: 'Sub Option2' },
                  ]
                },
                { text: 'Save' },
                { separator: true },
                { text: 'Exit' }
            ]
        }
    ];

    public onBeforeItemRender(args: MenuEventArgs): void {
      if (args.item.id == 'settingIcon') {
        args.element.setAttribute('title', 'Settings');
      }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));