How to add custom icon in react select of search filter

Question

I am working on react-select where I need to add custom icon with cross icon when user to select something from dropdown. I really tried hard but did not find any proper solution to resolve my problem. Could someone please help me how to add custom icon in react select.

Dropdown an attachment

As you see in attachment, you will see cross icon and I want my custom icon with this cross icon.

Answer 1

If you want to add an additional icon, you could still create a custom component (say for the ClearIndicator) then just add your icon to the component as a sibling alongside props.children and they should both appear on the DOM together

    <Select
      components={{
        ClearIndicator: ({ ...props }) => (
          <components.ClearIndicator
            {...props}
          >
            {props.children}
            <NewIcon>Your icon here</NewIcon>
          </components.ClearIndicator>
        ),
      }}
    />

Answer 2

Based on what I could find in this file , there is a component prop which takes an object which has these properties . You can probably use the CrossIcon or ClearIndicator property to specify the icon. In the end, it would like this:

<Select component={{
    CrossIcon: // Icon here,
    ClearIndicator: // Or here
  }}
/>