kb: update change grid icons kb (#1521)

* kb: update change grid icons kb * chore: applying suggested changes * Update knowledge-base/grid-change-expand-collapse-icons.md Co-authored-by: Yordan <[email protected]> * Update knowledge-base/grid-change-expand-collapse-icons.md Co-authored-by: Yordan <[email protected]> --------- Co-authored-by: Yordan <[email protected]>
telerik · Jul 18, 2023 · 3539abf · 3539abf
1 parent 77a899c
commit 3539abf
Showing 1 changed file with 41 additions and 2 deletions.
diff --git a/knowledge-base/grid-change-expand-collapse-icons.md b/knowledge-base/grid-change-expand-collapse-icons.md
@@ -31,15 +31,29 @@ You can change the expand/collapse [icons]({%slug general-information/font-icons
 ````CSHTML
 @*Change the icons in the Hierarchical Grid*@
 
+
+@*If your Telerik.UI.for.Blazor version is 4.3.0 or later, use the following CSS.*@
+
 <style>
+    .custom-icons .k-hierarchy-cell .k-svg-icon.k-svg-i-minus svg path{
+        d: path("M256 352 128 160h256L256 352z");
+    }
+    .custom-icons .k-hierarchy-cell .k-svg-icon.k-svg-i-plus svg path{
+        d: path("M352 256 160 384V128l192 128z");
+    }
+</style>
+
+@*If your Telerik.UI.for.Blazor version is below 4.3.0, use this CSS.*@
+
+@* <style>
     .custom-icons .k-hierarchy-cell .k-icon.k-i-plus::before {
         content: "\e005";
     }
 
     .custom-icons .k-hierarchy-cell .k-icon.k-i-minus::before {
         content: "\e006";
     }
-</style>
+</style> *@
 
 <TelerikGrid Class="custom-icons" Data="salesTeamMembers" @ref="Grid"
              OnStateInit="@( (GridStateEventArgs<MainModel> args) => OnStateInit(args))">
@@ -103,9 +117,34 @@ You can change the expand/collapse [icons]({%slug general-information/font-icons
 }
 ````
 
+>The SVG icons customization does not work in the Safari browser. As a workaround, hide the SVG icons and use font icons instead.
+
+>caption Replace the SVG icons with Font icons
+```
+
+<style>
+    .custom-icons .k-hierarchy-cell .k-svg-icon svg {
+        display:none;
+    }
+    .custom-icons .k-hierarchy-cell .k-svg-icon.k-svg-i-plus:before {
+         content: "\e005";
+         font-family: "WebComponentsIcons";
+    }
+    .custom-icons .k-hierarchy-cell .k-svg-icon.k-svg-i-minus:before {
+         content: "\e006";
+         font-family: "WebComponentsIcons";
+    }
+</style>
+
+```
+
 >caption Change the built-in expand/collapse icons. The result of the code snippet above.
 
 ![Hierarchical Grid with changed expand/collapse icons](images/grid-change-expand-collapse-icons-example.png)
 
 ## Notes
-To get the desired icons, you can use your dev tools to inspect the rendered icon you want and get its content. Also, you can use any custom icons that are not from the Telerik font (e.g., icons from Bootstrap, Open Iconic, and so on) by specifying the desired font name in addition to the content. 
+To get the desired icons, you can use your dev tools to inspect the rendered icon that you want to use and get its content/path. Also, you can use any custom icons that are not from the Telerik icons package (e.g., icons from Bootstrap, Open Iconic, and so on) by specifying the desired font name in addition to the content. 
+
+## See Also
+
+* [Font and SVG Icons]({%slug general-information/font-icons%})