You can enhance the textual content of the DropDownButton by adding image, predefined, or custom icons to it.
With a view to the web standards, it is better to use a background image because icons are used for decoration and not for representing structural content.
The DropDownButton provides options for:
- Using the built-in Kendo UI for Vue icons. They are applied through the
iconproperty and displayed as a background for the DropDownButton. To see the full list of the web font icons in Kendo UI for Vue, refer to the article on styles and layout.
- Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the
- Adding image icons. They are applied through the
imageUrlproperty of the component.
The following example demonstrates how to use the different types of icons in a DropDownButton.