From 345d884208f094ce614d30c07a394ae55d31e574 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Fri, 9 Aug 2024 16:05:01 +0300 Subject: [PATCH 1/2] docs(Checkbox): ravamp kb article --- knowledge-base/checkbox-custom-icon.md | 96 ++++++++++++-------------- 1 file changed, 45 insertions(+), 51 deletions(-) diff --git a/knowledge-base/checkbox-custom-icon.md b/knowledge-base/checkbox-custom-icon.md index f9a32253df..a4d3274626 100644 --- a/knowledge-base/checkbox-custom-icon.md +++ b/knowledge-base/checkbox-custom-icon.md @@ -1,8 +1,8 @@ --- -title: Change Checkbox Icon -description: How to change the CheckBox icon to a custom one. +title: How to Change Checkbox Icons +description: Learn how to change the Checkbox icon, modify the default check mark and indeterminate icons, and integrate third-party icons. type: how-to -page_title: Custom Checkbox Icon +page_title: How to Change Checkbox Icons slug: checkbox-kb-custom-icon position: tags: @@ -22,69 +22,63 @@ res_type: kb ## Description -How do I change the checkbox icon? I want to use another icon, not the default checkmark. +This knowledge base article answers the following questions: -## Solution - -Add a `Class` to the CheckBox component. [Override the theme styles]({%slug themes-override%}) and change the default font icon glyphs. - -You can replace the icons with different glyphs, even from a different font. You can also change the icon size and color. +* 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? -The `k-icon` CSS class applies the custom font, which contains all [built-in Telerik font icons]({%slug common-features-icons%}). If you will use a different font, remove `k-icon`. +## Solution +1. Set a custom CSS class to the Tooltip through the `Class` parameter. This configuration will allow you to target specific Checkbox instances. +2. Use the defiend class to [Override the theme styles]({%slug themes-override%}) with the following CSS approach. ->caption How to change the checkbox icon +>caption How to change the Checkbox icons ````CSHTML - - - + +Make indeterminate +
+
+ + + +@code { + private bool? IndeterminateValue { get; set; } +} ```` +## See Also +* [Built-in Font and SVG Icons]({%slug common-features-icons%}) +* [Checkbox Indeterminate State]({%slug checkbox-indeterminate-state%}) + From f6da657d0752f653dcf1544abee80bbaafe08ae4 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 12 Aug 2024 14:36:29 +0300 Subject: [PATCH 2/2] docs(Checkbox): apply suggested changes --- .k-cell-inner | 0 .k-link | 0 knowledge-base/checkbox-custom-icon.md | 32 +++++++++++++++----------- 3 files changed, 19 insertions(+), 13 deletions(-) create mode 100644 .k-cell-inner create mode 100644 .k-link diff --git a/.k-cell-inner b/.k-cell-inner new file mode 100644 index 0000000000..e69de29bb2 diff --git a/.k-link b/.k-link new file mode 100644 index 0000000000..e69de29bb2 diff --git a/knowledge-base/checkbox-custom-icon.md b/knowledge-base/checkbox-custom-icon.md index a4d3274626..37661effa4 100644 --- a/knowledge-base/checkbox-custom-icon.md +++ b/knowledge-base/checkbox-custom-icon.md @@ -31,17 +31,24 @@ This knowledge base article answers the following questions: ## Solution 1. Set a custom CSS class to the Tooltip through the `Class` parameter. This configuration will allow you to target specific Checkbox instances. -2. Use the defiend class to [Override the theme styles]({%slug themes-override%}) with the following CSS approach. +2. Use the defiend class to [override the theme styles]({%slug themes-override%}) with the following CSS approach. >caption How to change the Checkbox icons ````CSHTML - -Make indeterminate -
-
- - + + +

+ + + Make Indeterminate +

@code { - private bool? IndeterminateValue { get; set; } + private bool? CheckBoxValue { get; set; } } ````