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

Icon DropDownButton

You can enhance the textual content of the DropDownButton by displaying an image, predefined or custom icons and SVG icons to the component.

The DropDownButton provides the following options to set an image or icon inside the component:

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. Set the svgIcon property, or Continue Using Font Icons.

SVG Icon DropDownButton

To display an SVG icon inside the DropDownButton, set the svgIcon property of the component to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

<kendo-dropdownbutton [svgIcon]="svgShare" ... > Share </kendo-dropdownbutton>
import { shareIcon, SVGIcon } from '@progress/kendo-svg-icons';

public svgShare: SVGIcon = shareIcon;

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

Example
View Source
Change Theme:

Font Icon DropDownButton

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. For details, go to the list of font icons supported by Kendo UI for Angular.
      <kendo-dropdownbutton icon="export" ... > Export as</kendo-dropdownbutton>
    • iconClass property to a third-party font icon library (such as FontAwesome).
      <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
Change Theme:

Using an Image URL

To display an image from a URL link inside the DropDownButton, set the imageUrl property of the component.

<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
Change Theme: