Icons support in Angular Multi select component

5 Sep 20252 minutes to read

You can render icons to the list items by mapping the iconCss field within the fields property. This iconCss field creates a span element in each list item with the mapped CSS class name, allowing you to style the icons according to your requirements.

In the following sample, icon classes are mapped with the iconCss field.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'




import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule, MultiSelectModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiSelect component
    template: `<ejs-multiselect id='multiselectelement' [dataSource]='data' [fields]='fields' [placeholder]='text'></ejs-multiselect>`
})
export class AppComponent {
    constructor() {
    }
    // defined the array of data
    public data: { [key: string]: Object }[] = [
        { class: 'asc-sort', type: 'Sort A to Z', id: '1' },
        { class: 'dsc-sort', type: 'Sort Z to A ', id: '2' },
        { class: 'filter', type: 'Filter', id: '3' },
        { class: 'clear', type: 'Clear', id: '4' }];
    // map the icon column to iconCSS field.
    public fields: Object = { text: 'type', iconCss: 'class', value: 'id' };
    //set the placeholder to MultiSelect input
    public text: string = 'Select a format';
}

main.ts

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