Change Checkbox Icon
Environment
Product | Checkbox for Blazor |
Description
How do I change the checkbox icon? I want to use another icon, not the default checkmark.
Solution
Add a Class
to the component and cascade through it to alter the font icon glyph that is used.
You can replace it with a different glyph, even froma different font, you can chang the size of the icon and the checkbox and its color.
How to change the checkbox icon
<TelerikCheckBox Value="true" Class="heart-icon">
</TelerikCheckBox>
<TelerikCheckBox Value="false" Class="heart-icon">
</TelerikCheckBox>
<TelerikCheckBox Value="false" Indeterminate="true" Class="heart-icon">
</TelerikCheckBox>
<style>
/* remove some built-in styles */
.heart-icon.k-checkbox,
.heart-icon.k-checkbox:focus,
.heart-icon.k-checkbox:checked,
.heart-icon.k-checkbox:checked:focus {
border: none;
background: none;
box-shadow: none;
}
.heart-icon.k-checkbox::before,
.heart-icon.k-checkbox:checked::before,
.heart-icon.k-checkbox:indeterminate::before {
transform: none;
top: 0;
left: 0;
width: auto;
height: auto;
font-size: 30px; /* used for dimensions, see the next section */
}
/* set desired dimensions */
.heart-icon.k-checkbox {
width: 30px;
height: 30px;
}
/* change the font icon glyph to a different one - in this case - a heart icon from the Telerik font
we also change the colors here to denote states, you can alter this further - like using your own fonts or colors
*/
.heart-icon.k-checkbox:checked::before {
content: "\e301";
color: #ff6358;
}
.heart-icon.k-checkbox:indeterminate::before {
content: "\e300";
color: #ff6358;
background: none;
}
.heart-icon.k-checkbox::before {
content: "\e300";
color: #656565;
}
</style>