UI组件库Kendo UI for Vue原生组件中文教程：如何使用图标按钮？

Button提供以下选项：

• 使用内置的Kendo UI for Vue图标，内置图标通过icon 属性应用并显示为 Button 的背景。
• 添加image图标，它们通过组件的imageUrl属性应用。
• 添加 FontAwesome 和其他字体图标，它们是通过iconClass属性设置所需的第三方 CSS 类来实现的。

下面的示例演示如何在 Button 中使用不同类型的图标。

main.vue

<template><div><kbutton :icon="'refresh'">Kendo UI for Vue font icon</kbutton><kbutton :image-url="'https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'">Image icon</kbutton><kbutton :icon-class="'fa fa-key fa-fw'">FontAwsome icon</kbutton></div></template><script>import { Button } from '@progress/kendo-vue-buttons';export default {components: {'kbutton': Button}}</script><style>.k-button + .k-button {margin-left: 5px}</style>

main.js

import { createApp } from 'vue'import App from './main.vue'createApp(App).mount('#app')

Telerik_KendoUI产品技术交流群：726377843    欢迎一起进群讨论