How to Change Checkbox Icons
Environment
| Product | Checkbox for Blazor |
Description
This knowledge base article answers the following questions:
- How do I change the Checkbox icon?
- How to change the default check mark icon?
- How to change the icon of the indeterminate state?
- How to integrate custom icons from a third-party library into a Telerik Checkbox component?
Solution
- Set a custom CSS class to the Tooltip through the
Classparameter. This configuration will allow you to target specific Checkbox instances. - Use the defiend class to override the theme styles with the following CSS approach.
How to change the Checkbox icons
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<p>
<label>
<TelerikCheckBox @bind-Value="@CheckBoxValue"
Size="@ThemeConstants.CheckBox.Size.Large"
Indeterminate="@( !CheckBoxValue.HasValue )"
Class="custom-icons" />
Custom CheckBox
</label>
<TelerikButton OnClick="@( () => CheckBoxValue = null )">Make Indeterminate</TelerikButton>
</p>
<style>
/* Set the Font Awesome family and weight for custom checkbox icons */
.custom-icons.k-checkbox:before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
/* Remove the default background image for checked state */
.custom-icons.k-checkbox:checked {
background-image: none;
}
/* Set the Font Awesome check mark icon for the checked state */
.custom-icons.k-checkbox:checked:before {
content: "\f058"; /* Check Circle icon */
}
/* Remove the default background image for indeterminate state */
.custom-icons.k-checkbox:indeterminate {
background-image: none;
}
/* Set the Font Awesome question icon for the indeterminate state */
.custom-icons.k-checkbox:indeterminate:before {
content: "\3f"; /* Question icon */
margin-left: 3px;
}
</style>
@code {
private bool? CheckBoxValue { get; set; }
}