# DropDownButton Icon Options

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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#svgicon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-vue-ui-develop/components/icons/svgicon/svgicon-list).
* [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#icon)—Displays a font icon from the Kendo UI theme. For available icons, refer to the [list of font icons](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/).
* [`iconClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#iconclass)—Displays an icon from a CSS class, such as a [Font Awesome](https://fontawesome.com/) icon.
* [`imageUrl`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#imageurl)—Displays an image from a URL.
* [`endSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#endsvgicon) and [`endIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/dropdownbutton/icons/source.txt)

## SVG Icons

To display an SVG icon, set the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#svgicon) property to the necessary [`SVGIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/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:

1. [Load the font icons in your project](https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/#usage) so that the icon renders as expected.
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#icon) property to a font icon in the Kendo UI theme.

     ```vue
     <DropDownButton :icon="'gear'" :items="items" :text="'Settings'" />
     ```

   * [`iconClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#iconclass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).

     ```vue
     <DropDownButton :icon-class="'fa fa-cog'" :items="items" :text="'Settings'" />
     ```

## Image URL

To display an image from a URL, set the [`imageUrl`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#endSvgIcon)—Sets an SVG icon after the DropDownButton text.
* [`endIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#endIcon)—Sets a font icon from the Kendo UI theme after the DropDownButton text. To render font icons, [set the icon type to `font`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon-settings).

You can also combine it with a custom leading icon configured through the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#svgicon) or [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops#icon) prop.

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/dropdownbutton/end-icon/source.txt)

## Suggested Links

* [API Reference of the DropDownButton](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/dropdownbuttonprops)
* [Data Binding](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/dropdownbutton/data-binding)