DropDownButton Icon Options

Updated on Nov 6, 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 FontAwesome icon.
• imageUrl—Displays an image from a URL.
• endSvgIcon and 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 for font icons. For details, see Continue Using Font Icons.

SVG Icons

To display an SVG icon, set the svgIcon property to the necessary SVGIcon.

html

<kendo-dropdownbutton [svgIcon]="svgShare">Share</kendo-dropdownbutton>

ts

import { shareIcon } from '@progress/kendo-svg-icons';

public svgShare = shareIcon;

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

Example

View Source

Loading ...

Font Icons

To display a Font icon inside the DropDownButton:

1. Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
2. Depending on the font icons library, you can set the:
   • icon property to a font icon in the Kendo UI theme.
     html

     <kendo-dropdownbutton icon="export">Export as</kendo-dropdownbutton>

   • iconClass property to a third-party font icon library (such as FontAwesome).
     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.

Example

View Source

Loading ...

Image URL

To display an image from a URL, set the 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.

Example

View Source

Loading ...

End Icon

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

• endSvgIcon—Sets an SVGIcon 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.

html

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

The end icon appears before the optional arrow configured through the arrowIcon property.

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

Example

View Source

Loading ...

Suggested Links

• API Reference of the DropDownButton
• Data Binding
• Icon Settings
• Kendo UI for Angular DropDownButton