Customization
The Chip component provides options for customizing its look and feel.
When customizing the rendering of the Chip, you can:
Custom Remove Icons
To specify a custom Remove icon, use the removeIcon property.
<span id="chip"></span>
<script>
$("#chip").kendoChip({
removable: true,
removeIcon: "x",
label: "Close"
});
</script>
Displaying Avatars
The Chip component treats the avatar as an icon. To display an avatar, pass a CSS class to the avatarClass property.
The avatarClass property allows you to define a CSS class or multiple classes separated by spaces. These classes are applied to a span element inside the Chip.
<span id="chip"></span>
<script>
$("#chip").kendoChip({
avatarClass: "maria",
label: "Maria"
});
</script>
<style>
.maria {
background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg");
}
</style>