How to add icons to Angular MultiSelect Dropdown input?

When working with Syncfusion Angular MultiSelect Dropdown 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

Conclusion

I hope you enjoyed learning about how to add icons to Angular MultiSelect Dropdown input.

You can refer to our Angular MultiSelect Dropdown feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular MultiSelect Dropdown example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!