How to customize icon and width in Angular Dropdown Menu

25 Sep 20262 minutes to read

Width of the Angular Dropdown Menu can be customized by setting required width to the dropdown element.

The following UI can be achieved by setting iconPosition as Top, width as 85px
and size of the font icon as 40px by adding e-custom class.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
imports: [
        
        DropDownButtonModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <!-- To render DropDownButton. -->
               <button ejs-dropdownbutton [items]='items' content='Find & Select' iconCss='e-icons e-search' iconPosition='Top' cssClass='e-custom'></button></div>`
})

export class AppComponent {
   // Initialize action items.
   public items: ItemModel[] = [
    {
        text: 'Find'
    },
    {
        text: 'Replace'
    },
    {
        text: 'Go To'
    },
    {
        text: 'Go To Special'
    }];
}

main.ts

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