# 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-angular-ui/components/buttons/api/dropdownbuttoncomponent#svgicon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list).
* [`icon`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#icon)—Displays a font icon from the Kendo UI theme. For available icons, refer to the [list of font icons](https://www.telerik.com/kendo-angular-ui/components/icons/icon/icon-list).
* [`iconClass`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#iconclass)—Displays an icon from a CSS class, such as a [FontAwesome](https://fontawesome.com/) icon.
* [`imageUrl`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#imageurl)—Displays an image from a URL.
* [`endSvgIcon`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#endsvgicon) and [`endIcon`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#endicon)—Displays an SVG or font icon after the DropDownButton text.

> Starting with R2 2023 (`v13.0.0`), Kendo UI for Angular components and themes use SVG icons by default. To use font icons with the `icon` input, configure [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui/components/icons/api/icon_settings) for font icons. For details, see [Continue Using Font Icons](https://www.telerik.com/kendo-angular-ui/components/styling/migrating-font-svg#continue-using-font-icons).

## SVG Icons

To display an SVG icon, set the [`svgIcon`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#svgicon) property to the necessary [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon).

```html example.component.html
<kendo-dropdownbutton [svgIcon]="svgShare">Share</kendo-dropdownbutton>
```

```ts example.component.ts
import { shareIcon } from '@progress/kendo-svg-icons';

public svgShare = shareIcon;
```

The following example demonstrates how to set an SVG icon inside the DropDownButton.

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

## Font Icons

To display a Font icon inside the DropDownButton:

1. Use the [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui/components/icons/api/icon_settings) token of the Icons package and set the icon type to `font`. For more information, go to the topic about [icon settings](https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings#using-font-icons).
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#icon) property to a font icon in the Kendo UI theme.
     ```html
     <kendo-dropdownbutton icon="export">Export as</kendo-dropdownbutton>
     ```
   * [`iconClass`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#iconclass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).
     ```html
     <kendo-dropdownbutton iconClass="fa fa-suitcase">Travel by</kendo-dropdownbutton>
     ```

The following example demonstrates how to set the `icon` and `iconClass` properties of the DropDownButton.

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

## Image URL

To display an image from a URL, set the [`imageUrl`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#imageurl) property of the DropDownButton.

```html
<kendo-dropdownbutton
    imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png">
    Golf Courses
</kendo-dropdownbutton>
```

The following example demonstrates the `imageUrl` property of the DropDownButton in action.

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

## End Icon

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

* [`endSvgIcon`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#endsvgicon)—Sets an [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) after the DropDownButton text.
* [`endIcon`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#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-angular-ui/components/icons/icon-settings).

```html
<kendo-dropdownbutton
    [data]="shareData"
    [svgIcon]="svgShare"
    [endSvgIcon]="svgNext">
    Share
</kendo-dropdownbutton>
```

The end icon appears before the optional arrow configured through the [`arrowIcon`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#arrowicon) property.

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

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

## Suggested Links

* [API Reference of the DropDownButton](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent)
* [Data Binding](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton/data-binding)
* [Icon Settings](https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings)
* [Kendo UI for Angular DropDownButton](https://www.telerik.com/kendo-angular-ui/dropdownbutton)