Button Icon Options
You can enhance the textual content of the Button by displaying SVG icons, font icons, or images.
The Button provides the following options to set an image or icon inside the component:
svgIcon—Displays an SVG icon inside the Button. 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 Font Awesome icon.imageUrl—Displays an image from a URL.endSvgIconandendIcon—Displays an SVG or font icon after the Button text.
SVG Icons
To display an SVG icon, set the svgIcon property of the Button to the necessary SVGIcon.
<script setup>
import { Button } from '@progress/kendo-vue-buttons';
import { gearIcon } from '@progress/kendo-svg-icons';
</script>
<template>
<Button :svg-icon="gearIcon" />
</template>The following example demonstrates Buttons with default SVG icons.
Font Icons
To display a Font icon inside the Button:
- Load the font icons in your project so that the icon renders as expected.
- Depending on the font icons library, you can set the:
iconproperty to a font icon in the Kendo UI theme.vue<Button icon="calendar">Events</Button>iconClassproperty to a third-party font icon library (such as FontAwesome).vue<Button icon-class="fa fa-heart" />
The following example demonstrates how to set the icon анд iconClass properties of the Button.
Image URL
To display an image from a URL, set the imageUrl property of the Button.
<Button image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png">Golf</Button>The following example demonstrates the imageUrl property of the Button in action.
End Icon
To display an icon after the Button text, use the following props:
endSvgIcon—Sets an SVG icon after the Button text.endIcon—Sets a font icon from the Kendo UI theme after the Button text. To render font icons, set the icon type tofont.
<KButton :end-svg-icon="chevronRightIcon">Next</KButton>You can also combine it with a custom leading icon configured through the svgIcon or icon prop.
<KButton :svg-icon="fileExcelIcon" :end-svg-icon="downloadIcon">Export Report</KButton>The following example demonstrates how to set an SVG icon after the text of the Button by setting the endSvgIcon prop.