Hello,
I am building a component in React and need to add a custom icon to the right of the autocomplete component. By default, it has a "x" icon, but I would like to have a search icon in there.
Can you tell me if this is natively supported by the Kendo autocomplete component ?
Here the links:
Autocomplete: https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/
Props: AutoCompleteProps - React Dropdowns Library - KendoReact API (telerik.com)
An image is attached that shows what is the expected behavior of the component, but we do need to have a box below the input as the autocomplete comp. does.
1 Answer, 1 is accepted
Hello, Lester,
You can change the clear icon or any other one by wrapping the rendered component with an `IconsContext.Provider` and setting the `value.icons` property:
<IconsContext.Provider
value={{
type: 'svg',
icons: { [xIcon.name]: searchIcon },
}}
>The `xIcon` is the icon rendered by default for the AutoComplete component, and `searchIcon` is the newly added one and it is imported from the `@progress/kendo-svg-icons` package (all the SVG icons are listed in this section).
I hope this helps, but please let me know if you have any further questions.
Regards,
Wissam
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!