How to change the caret icon in DropDownList, ComboBox, NumericTextBox?

[Alina]

Is it possible to customize the black triangular "caret-down" icon used in the DropdownList and similar components (like ComboBox)?

I’d also like to know how to replace the "caret-up" and "caret-down" icons in the NumericTextBox.

Our apps use Font Awesome icons consistently, and I’m trying to replace these default icons with Font Awesome equivalents, but I haven’t been able to figure out how to do this. Could you provide guidance or examples?

 

[Georgi]

Hi Alina,

Thank you very much for the details provided.

From what I understood from your question, you are currently using font icons in your Angular application and are looking for an approach that would allow you to change the built-in icons in the Kendo UI for Angular DropDownList, Kendo UI for Angular ComboBox and Kendo UI for Angular NumericTextBox with custom ones. Please, let me know if I misinterpreted the query.

One possible approach that would allow the developer to achieve the desired modifications of the icons would be to follow the approach suggested in the designated Font Icons section of our Changing the Built-in Icons article:

• https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings#font-icons

For your convenience, here is a StackBlitz demo that demonstrates the suggested approach in action:

• https://stackblitz.com/edit/angular-nscvdr

I hope the provided information helps. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik

[Alina]

Thank you for your response! This information did help me to change these icons successfully in our Angular apps.

I have 2 follow-up questions:

1. How to achieve the same for React and Vue components?

2. The TextBox component allows us to display a validation icon by using the showErrorIcon attribute. However, it seems that other form controls, such as DatePicker, DropDowns (e.g., MultiSelect, Autocomplete), and other inputs, do not have this feature.

In your Figma KENDO UI Kit, all form controls, including date inputs and dropdowns, display validation icons in their invalid states. Our UX team relies on this Figma Kit to design user interfaces and expects validation icons to be consistent across all form controls for a cohesive user experience.

Is there currently a way to enable validation icons on other form controls, similar to the functionality provided in the TextBox component? If not, are there any recommendations or plans to add support for validation icons to other form controls?

[Yanmario]

Hi Alina,

For React and Vue, please submit a ticket or start a forum thread with their respective product teams, as we have separate support teams for these frameworks.

Regarding the validation icons for the DropDowns and DateInputs, no such API is currently available. Therefore, the following feature would need to be implemented for the DropDowns:

https://feedback.telerik.com/kendo-angular-ui/1517069-validation-icons-on-more-than-just-textbox

I will add a vote on your behalf. However, demand for this feature has been low in recent years and it will need to gain more votes to be reconsidered.

In the meantime, adornments can be tested and used as validation icons:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/adornments

For the DateInputs, a separate feature request would need to be opened in our feedback portal.

Regards,
Yanmario
Progress Telerik