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:
icon
—Sets an icon inside the DropDownButton. For the full list of available icons, go to the list of font icons supported by Kendo UI for Angular.svgIcon
—Sets an SVG icon inside the DropDownButton. For the full list of available icons, go to the list of SVG icons supported by Kendo UI for Angular.iconClass
—Displays an icon from a CSS class. Using theiconClass
is suitable for rendering FontAwesome or other third-party font icons.imageUrl
—Sets an image icon through a URL link.
Font Icon DropDownButton
To display a font
icon inside the DropDownButton, use the list of font icons supported by Kendo UI for Angular and set the icon
property of the component to the necessary icon name.
<kendo-dropdownbutton icon="export" ... > Export as</kendo-dropdownbutton>
The following example demonstrates how to set an icon inside the DropDownButton.
SVG Icon DropDownButton
To display an SVG icon inside the Button:
-
Use the
ICON_SETTINGS
token of the Icons package and set the icon type tosvg
. For more information, go to the topic about icon settings. -
Set the
svgIcon
property of the DropDownButton to the necessarySVGIcon
. 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.
Using the Icon Class
To display an icon inside the component, you can also set the iconClass
property of the DropDownButton to CSS classes. This approach is especially useful when you want to consume third-party icon libraries like FontAwesome.
<kendo-dropdownbutton iconClass="fa fa-suitcase" ... > Travel by </kendo-dropdownbutton>
The following example demonstrates how to display FontAwesome icons inside the DropDownButton.
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.