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,
A custom icon can be added by wrapping the rendered component with an `IconsContext.Provider` and setting the `value.icons` property to the custom SVG. I created an example that showcases this approach in action in which I am replacing the default x icon with a search icon:
https://stackblitz.com/edit/react-fr8ube-5p8grz?file=app%2Fmain.jsx
For more information about the icon rendering changes and using SVG icons, I would suggest checking the following articles:
https://www.telerik.com/blogs/future-icons-telerik-kendo-ui-themes
https://www.telerik.com/kendo-react-ui/components/styling/migrating-font-svg/
https://www.telerik.com/kendo-react-ui/components/utils/svgicon/
Regards,
Filip
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!
Rank 1
Awesome, this helps me a lot.
Now, the requirements have changed and now the people from Desing asks me to position the search icon to the left, instead replacing the 'x' icon. I would like to know if you have any approach for this as good as the one you just shared with me?
Thanks Filip!
Hi, Lester,
Currently, this can be achieved by using CSS. I created an example that showcases this approach here:
https://stackblitz.com/edit/react-fr8ube-mkaqcu?file=index.html
The main idea is to target the .k-input-solid className and set its flex-direction to row-reverse:
.k-input-solid {
display: flex;
flex-direction: row-reverse ;
}Filip