New to KendoReact? Start a free 30-day trial

Add an arrow icon to the MultiSelect

Updated on Dec 19, 2025

Environment

Product Version	12.0.2
Product	Progress® KendoReact MultiSelect

Description

I want to display a down arrow in the MultiSelect to make it clear that it expands when clicked.

Solution

The recommended approach is to use the suffix prop of the MultiSelect, together with the InputSuffix wrapper, to render the desired SvgIcon.

The following example demonstrates this approach in action:

Change Theme

Theme

Loading ...

Alternative Approach: Font Icons

If your project relies on font icons, you can use the following CSS that uses the MultiSelect class names as selectors and adds a font-icon using the content property:

css

.k-multiselect .k-input-values:after {
	content: "\e006";
	font-family: "WebComponentsIcons";
	outline: 0;
	position: absolute;
	right: 20px;
}

Make sure that the @progress/kendo-font-icons CDN is loaded:

html

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />