How to Add Icons to Syncfusion Angular MultiSelect Dropdown Input

When working with Syncfusion Angular MultiSelect component, you may want to add icons to the input of the dropdown to enhance its visual appeal. This can be achieved by utilizing the created event of the MultiSelect component.

Add Created Event to the MultiSelect Component

In your component’s HTML, set up the MultiSelect component and bind the created event:

<div id="multiselect-sample" class="control-section">
  <ejs-multiselect
    id="sample-list1"
    [dataSource]="sportsData"
    showDropDownIcon="true"
    (created)="onCreated()"
    [fields]="fields"
    [placeholder]="waterMark"
  ></ejs-multiselect>
</div>

Handle the Created Event

In your component’s TypeScript file, handle the created event to insert the icon:

public onCreated() {
  const chipsCollectionSpan = document.getElementsByClassName(
    'e-multi-select-wrapper e-down-icon'
  )[0];

  if (chipsCollectionSpan) {
    const speechBubbleIcon = document.createElement('span');
    speechBubbleIcon.className = 'e-icons e-large e-multiple-comment';

    (chipsCollectionSpan as any).parentNode.insertBefore(
      speechBubbleIcon,
      chipsCollectionSpan
    );
  }
}

This code snippet adds a custom icon to the input of the MultiSelect dropdown by creating a new span element with the desired icon classes and inserting it into the dropdown input.

Add Custom Styles

First, define the necessary CSS to ensure proper spacing for the icon:

<style>
  .e-icons.e-large {
      margin: 5px 1px;
  }
</style>

By following these steps, you can add icons to the input of the Syncfusion MultiSelect dropdown in your Angular project, enhancing its visual appeal and user experience.

Live Sample

For a live example and code demonstration, you can refer to the following sample:

Adding Icons to Syncfusion MultiSelect Dropdown’s Input