New to Kendo UI for Vue? Start a free 30-day trial

DropDownButton Icon Options

Updated on Nov 11, 2026

You can enhance the textual content of the DropDownButton by displaying SVG icons, font icons, or images.

The DropDownButton supports the following icon options:

svgIcon—Displays an SVG icon. For available icons, refer to the list of SVG icons.
icon—Displays a font icon from the Kendo UI theme. For available icons, refer to the list of font icons.
iconClass—Displays an icon from a CSS class, such as a Font Awesome icon.
imageUrl—Displays an image from a URL.
endSvgIcon and endIcon—Displays an SVG or font icon after the DropDownButton text.

The following example demonstrates a DropDownButton with an SVG icon, a Font Awesome icon, and an image.

Loading ...

SVG Icons

To display an SVG icon, set the svgIcon property to the necessary SVGIcon, as the demo above shows.

vue

<script setup>
import { DropDownButton } from '@progress/kendo-vue-buttons';
import { gearIcon } from '@progress/kendo-svg-icons';
</script>

<template>
    <DropDownButton :svg-icon="gearIcon" :items="items" :text="'Settings'" />
</template>

Font Icons

To display a Font icon inside the DropDownButton:

Load the font icons in your project so that the icon renders as expected.
Depending on the font icons library, you can set the:
- icon property to a font icon in the Kendo UI theme.
  vue
```
<DropDownButton :icon="'gear'" :items="items" :text="'Settings'" />
```
- iconClass property to a third-party font icon library (such as FontAwesome).
  vue
```
<DropDownButton :icon-class="'fa fa-cog'" :items="items" :text="'Settings'" />
```

Image URL

To display an image from a URL, set the imageUrl property of the DropDownButton, as the demo above shows.

vue

<DropDownButton :image-url="'https://example.com/icons/settings.png'" :items="items" :text="'Settings'" />

End Icon

To display an icon after the DropDownButton text, use the following props:

endSvgIcon—Sets an SVG icon after the DropDownButton text.
endIcon—Sets a font icon from the Kendo UI theme after the DropDownButton text. To render font icons, set the icon type to font.

You can also combine it with a custom leading icon configured through the svgIcon or icon prop.

The following example demonstrates how to set an SVG icon after the text of the DropDownButton by setting the endSvgIcon prop.