How do I can add a custom icon to the right of the autocomple

[Lester]

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. 

[Filip]

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

[Lester]

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!

y

conjunction: y, e

[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 ;
 }

Regards,
Filip