Icons
You can enhance the meaning of the context by adding an icon to the Button either through the image-url option or sprite-css-class attributes.
The following example demonstrates how to create a TreeView with images.
<div id="vueapp" class="vue-app">
<kendo-treeview>
<kendo-treeview-item text="Baseball" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png">
<kendo-treeview-item text="Top News" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png"></kendo-treeview-item>
<kendo-treeview-item text="Photo Galleries" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/16/photo.png"></kendo-treeview-item>
<kendo-treeview-item text="Videos Records" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/16/video.png"></kendo-treeview-item>
<kendo-treeview-item text="Radio Records" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/16/speaker.png"></kendo-treeview-item>
</kendo-treeview-item>
<kendo-treeview-item text="Golf" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png">
<kendo-treeview-item text="Top News" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png"></kendo-treeview-item>
<kendo-treeview-item text="Photo Galleries" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/16/photo.png"></kendo-treeview-item>
<kendo-treeview-item text="Videos Records" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/16/video.png"></kendo-treeview-item>
<kendo-treeview-item text="Radio Records" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/16/speaker.png"></kendo-treeview-item>
</kendo-treeview-item>
<kendo-treeview-item text="Swimming" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png">
<kendo-treeview-item text="Top News" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png"></kendo-treeview-item>
<kendo-treeview-item text="Photo Galleries" image-url="https://demos.telerik.com/kendo-ui/content/shared/icons/16/photo.png"></kendo-treeview-item>
</kendo-treeview-item>
</kendo-treeview>
</div>Vue.use(TreeViewInstaller);
new Vue({
el: "#vueapp"
})The following example demonstrates how to create a TreeView with sprites.
<div id="vueapp" class="vue-app">
<kendo-treeview id="treeview-sprites">
<kendo-treeview-item text="Brazil" sprite-css-class="brazilFlag" :items="[
{ text: 'History', spriteCssClass: 'historyIcon' },
{ text: 'Geography', spriteCssClass: 'geographyIcon' }
]" ></kendo-treeview-item>
<kendo-treeview-item text="India" sprite-css-class="indiaFlag" :items="[
{ text: 'History', spriteCssClass: 'historyIcon' },
{ text: 'Geography', spriteCssClass: 'geographyIcon' }
]" ></kendo-treeview-item>
<kendo-treeview-item text="Netherlands" sprite-css-class="netherlandsFlag" :items="[
{ text: 'History', spriteCssClass: 'historyIcon' },
{ text: 'Geography', spriteCssClass: 'geographyIcon' }
]" ></kendo-treeview-item>
</kendo-treeview>
</div>
<style>
.k-panel {
-webkit-transform: translatez(0);
}
#treeview-sprites .k-sprite {
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
}
.brazilFlag {
background-position: 0 0;
}
.indiaFlag {
background-position: 0 -32px;
}
.netherlandsFlag {
background-position: 0 -64px;
}
.historyIcon {
background-position: 0 -96px;
}
.geographyIcon {
background-position: 0 -128px;
}
</style>Vue.use(TreeViewInstaller);
new Vue({
el: "#vueapp"
})