How to Add Icons to Syncfusion React AutoComplete Input

When working with Syncfusion React AutoComplete 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 AutoComplete component.

Handling the created event to insert the icon

To add an icon to the input of the AutoComplete component, you need to create a function that inserts a span element with the desired icon class. Below is an example of how to implement this:

const oncreate = () => { 
    var span = document.createElement('span');

    // Add the icon class to the span element
    span.setAttribute('class', 'e-icons e-contact');

    // Append the span element after the input wrapper
    autocompleteObj.current.inputWrapper.container.insertAdjacentElement(
        'afterbegin',
        span
    );
}

return (
    <AutoCompleteComponent  
        ref={autocompleteObj} 
        id="games" 
        dataSource={sportsData} 
        placeholder="e.g. Basketball" 
        created={oncreate}
    />
);

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

Adding Custom Styles

To ensure proper spacing and appearance for the icon, you can define the necessary CSS as follows:

span.e-contact {
    align-items: center;
    justify-content: center;
    line-height: 2;
    min-width: 28px;
    height: 30px;
    text-align: center;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: lightgray;
}

span.e-contact:before {
    content: '\e7b4';
}

Live Sample

You can view a live demonstration of this implementation at the following link: Live Sample.

AutoComplete Created Event.