Customization of the Chip
The Chip component provides options for customizing its look and feel.
When customizing the rendering of the Chip, you can:
Adding Custom Remove Icons
To specify a custom Remove icon, use the RemoveIcon property of the Chip.
@(Html.Kendo().Chip()
.Name("chip")
.Removable(true)
.RemoveIcon("x")
.Label("Close")
)
@addTagHelper *, Kendo.Mvc
<kendo-chip name="chip"
removable="true"
removable-icon="x"
label="Close">
</kendo-chip>
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.
@(Html.Kendo().Chip()
.Name("chip")
.AvatarClass("maria")
.Label("Maria")
)
<style>
.maria {
background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg");
}
</style>
@addTagHelper *, Kendo.Mvc
<kendo-chip name="chip"
avatar-class="maria"
label="Maria">
</kendo-chip>
<style>
.maria {
background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg");
}
</style>