diff --git a/_contentTemplates/grid/export.md b/_contentTemplates/grid/export.md
index a0c126d6d8..b0e3e78b5c 100644
--- a/_contentTemplates/grid/export.md
+++ b/_contentTemplates/grid/export.md
@@ -26,8 +26,8 @@
         
         <TelerikGrid Data="@GridData" AutoGenerateColumns="true" Pageable="true">
             <GridToolBar>
-                <GridCommandButton OnClick="@ShowLoadingSign" Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
-                <GridCommandButton OnClick="@ShowLoadingSign" Command="CsvExport" Icon="@IconName.FileCsv">Export to CSV</GridCommandButton>
+                <GridCommandButton OnClick="@ShowLoadingSign" Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
+                <GridCommandButton OnClick="@ShowLoadingSign" Command="CsvExport" Icon="file-csv">Export to CSV</GridCommandButton>
             </GridToolBar>
             <GridExport>
                 <GridExcelExport AllPages="true" FileName="telerik-grid-export" />
diff --git a/common-features/font-icons.md b/common-features/font-icons.md
index 25e37b7304..ff4447d193 100644
--- a/common-features/font-icons.md
+++ b/common-features/font-icons.md
@@ -23,13 +23,7 @@ In this article:
 
 Telerik UI for Blazor comes with the `TelerikIcon` component that you can use to render icons. It works with the following image types:
 
-* **Telerik font icon** - the `Telerik.Blazor.IconName` static class allows you to supply an `Icon` parameter that takes a **Telerik icon** from our built-in collection. To find the available **Telerik icons**, you can:
-
-    * Use Visual Studio's IntelliSense.
-    
-    * Refer to the [online API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.IconName) article.
-
-    >tip Telerik UI for Blazor uses the same icons as the Kendo UI suite. You can find the rendered icons in the [Kendo UI Web Font Icons Library](https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web) article. When you use the icon names in this article, remove the `k-i-` prefix, and you will get the correct icon name for Blazor UI. You can use them as hardcoded strings as well. Their corresponding class members are in `CamelCase`.
+* **Telerik font icon** - Telerik UI for Blazor uses the same icons as the Kendo UI suite. You can find the rendered icons in the [Kendo UI Web Font Icons Library](https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web) article. When you use the icon names in this article, remove the `k-i-` prefix, and you will get the correct icon name for Blazor UI.
 
 * **Third party font-icon** - the `IconClass` parameter lets you set a CSS class that provides the required font name, font size and content for the `::before` pseudoelement.
 
@@ -40,9 +34,7 @@ Telerik UI for Blazor comes with the `TelerikIcon` component that you can use to
 >caption Render a standalone icon through the TelerikIcon component
 
 ````CSHTML
-<TelerikIcon Icon="@IconName.Audio" /> @* will render the audio note icon *@
-
-@* <TelerikIcon Icon="audio" /> *@ @* This would also render the same audio icon *@
+<TelerikIcon Icon="audio" /> @* will render the audio note icon *@
 
 <TelerikIcon IconClass="oi oi-home" /> @* home icon from OpenIconic, assuming you have loaded the font on the page, you can use your own CSS classes and font icon fonts *@
 
@@ -71,9 +63,7 @@ Some Telerik components expose icon features out-of-the box. These parameters ma
 >caption How to use a built-in font icon class on a component's Icon property
 
 ````CSHTML
-<TelerikButton Icon="@IconName.Filter">I show the Filter icon</TelerikButton>
-<br />
-<TelerikButton Icon="filter">I also show the Filter icon through a hardcoded class name</TelerikButton>
+<TelerikButton Icon="filter">I show the Filter icon</TelerikButton>
 ````
 
 >caption The result from the code snippet above
diff --git a/common-features/images/telerik-button-with-icon.png b/common-features/images/telerik-button-with-icon.png
index 62da0e82aa..bfdc5622d3 100644
Binary files a/common-features/images/telerik-button-with-icon.png and b/common-features/images/telerik-button-with-icon.png differ
diff --git a/components/button/icons.md b/components/button/icons.md
index 2c2956b40d..74b7e78204 100644
--- a/components/button/icons.md
+++ b/components/button/icons.md
@@ -27,7 +27,7 @@ The following example shows how to use an image from a URL, a sprite image, and
 
 ````CSHTML
 <TelerikButton SpriteClass="k-icon netherlandsFlag">Sprite</TelerikButton>
-<TelerikButton Icon="@IconName.Filter">Font Icon</TelerikButton>
+<TelerikButton Icon="filter">Font Icon</TelerikButton>
 <TelerikButton ImageUrl="https://docs.telerik.com/blazor-ui/images/snowboarding.png">Image URL</TelerikButton>
 
 <style>
diff --git a/components/buttongroup/icons.md b/components/buttongroup/icons.md
index 734d87c816..5bacc759c1 100644
--- a/components/buttongroup/icons.md
+++ b/components/buttongroup/icons.md
@@ -33,7 +33,7 @@ It also shows how to use telerik icons, raster icons and sprite images*@
 <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
     <ButtonGroupToggleButton SpriteClass="@( FlagSelected ? "flag netherlands" : "flag brazil")" @bind-Selected="@FlagSelected">Sprite</ButtonGroupToggleButton>
 
-    <ButtonGroupToggleButton Icon="@( FontSelected ? IconName.VolumeOff : IconName.VolumeUp )" @bind-Selected="@FontSelected">Font Icon</ButtonGroupToggleButton>
+    <ButtonGroupToggleButton Icon="@( FontSelected ? "volume-off" : "volume-up" )" @bind-Selected="@FontSelected">Font Icon</ButtonGroupToggleButton>
 
     <ButtonGroupToggleButton ImageUrl="@RasterIconUrl" @bind-Selected="@RasterSelected">Image URL</ButtonGroupToggleButton>
 </TelerikButtonGroup>
diff --git a/components/chart/tooltip/overview.md b/components/chart/tooltip/overview.md
index 9eba9afad2..418985a912 100644
--- a/components/chart/tooltip/overview.md
+++ b/components/chart/tooltip/overview.md
@@ -228,7 +228,7 @@ The available series data point information in the `context` is:
                      Data="@modelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
             <ChartSeriesTooltip Visible="true">
                 <Template>
-                    <TelerikIcon Icon="@IconName.Information" />
+                    <TelerikIcon Icon="information" />
                     @((context.DataItem as MyDataModel).SecondSeriesValue) for @((context.DataItem as MyDataModel).ExtraData)
                 </Template>
             </ChartSeriesTooltip>
diff --git a/components/chart/tooltip/shared.md b/components/chart/tooltip/shared.md
index 6e425ec8d4..da3e7dfa6d 100644
--- a/components/chart/tooltip/shared.md
+++ b/components/chart/tooltip/shared.md
@@ -112,7 +112,7 @@ Each `Point` contains the following data:
                 foreach (var point in points)
                 {
                     <div>
-                        <TelerikIcon Icon="@IconName.Information" />
+                        <TelerikIcon Icon="information" />
                         @*this example shows how to parse the FormattedValue to a int,*@
                         @*but you can also parse it to any other type your data uses / has*@
                         Point value: @(int.Parse(point.FormattedValue).ToString("C"))
diff --git a/components/contextmenu/events.md b/components/contextmenu/events.md
index 4b06e60b33..043e6806df 100644
--- a/components/contextmenu/events.md
+++ b/components/contextmenu/events.md
@@ -54,30 +54,30 @@ Last clicked item: @ClickedItem?.Text
             new MenuItem()
             {
                 Text = "Share",
-                Icon = IconName.Share,
+                Icon = "share",
                 Items = new List<MenuItem>()
                 {
                     new MenuItem()
                     {
                         Text = "FaceBook",
-                        Icon = IconName.Facebook
+                        Icon = "facebook"
                     },
                     new MenuItem()
                     {
                         Text = "LinkedIn",
-                        Icon = IconName.Linkedin
+                        Icon = "linkedin"
                     },
                     new MenuItem()
                     {
                         Text = "Twitter",
-                        Icon = IconName.Twitter
+                        Icon = "twitter"
                     },
                 }
             },
             new MenuItem()
             {
                 Text = "Map Location",
-                Icon = IconName.MarkerPin
+                Icon = "marker-pin"
             }
         };
 
diff --git a/components/contextmenu/icons.md b/components/contextmenu/icons.md
index b1443f5904..bb2e1676f9 100644
--- a/components/contextmenu/icons.md
+++ b/components/contextmenu/icons.md
@@ -26,11 +26,14 @@ The `IconClassField` and `ImageUrlField` are rendered, respectively, as `<span c
 @* This example shows how to add icons or images to context menu items
 Make sure that you also refernce the OpenIconic font that comes with the Blazor App template to see the custom font icon *@
 
-<TelerikMenu Data="@MenuData"
-             IconField="@nameof(MenuModel.TelerikIcon)"
-             ImageUrlField="@nameof(MenuModel.MyImage)"
-             IconClassField="@nameof(MenuModel.MyIconClass)">
-</TelerikMenu>
+<div id="context-menu-target" style="background:yellow;">right click for context menu</div>
+
+<TelerikContextMenu Data="@MenuData"
+                    Selector="#context-menu-target"
+                    IconField="@nameof(MenuModel.TelerikIcon)"
+                    ImageUrlField="@nameof(MenuModel.MyImage)"
+                    IconClassField="@nameof(MenuModel.MyIconClass)">
+</TelerikContextMenu>
 
 @code {
     public List<MenuModel> MenuData { get; set; }
@@ -47,7 +50,7 @@ Make sure that you also refernce the OpenIconic font that comes with the Blazor
             new MenuModel()
             {
                 Text = "IconField",
-                TelerikIcon = IconName.Email
+                TelerikIcon = "email"
             },
             new MenuModel()
             {
diff --git a/components/contextmenu/integration.md b/components/contextmenu/integration.md
index 246dc846ca..e1b8d82b67 100644
--- a/components/contextmenu/integration.md
+++ b/components/contextmenu/integration.md
@@ -94,7 +94,7 @@ Hooking to your own HTML elements' events lets you determine what to do with the
             new ContextMenuItem
             {
                 Text = "More Info",
-                Icon = IconName.Information,
+                Icon = "information",
                 CommandName = "info"
             },
             new ContextMenuItem
@@ -109,13 +109,13 @@ Hooking to your own HTML elements' events lets you determine what to do with the
                     new ContextMenuItem
                     {
                         Text = "Delete",
-                        Icon = IconName.Delete,
+                        Icon = "delete",
                         CommandName = "delete"
                     },
                     new ContextMenuItem
                     {
                         Text = "Report",
-                        Icon = IconName.Cancel,
+                        Icon = "cancel",
                         CommandName = "report"
                     }
                 }
@@ -292,9 +292,9 @@ In this example, the context menu is used to select/deselect items, put an item
         // context menu items
         MenuItems = new List<MenuItem>()
         {
-            new MenuItem(){ Text = "Select", Icon=IconName.CheckboxChecked, CommandName="ToggleSelect" },
-            new MenuItem(){ Text = "Edit", Icon=IconName.Edit, CommandName="BeginEdit" },
-            new MenuItem(){ Text = "Delete", Icon=IconName.Delete, Action = DeleteItem }
+            new MenuItem(){ Text = "Select", Icon="checkbox-checked", CommandName="ToggleSelect" },
+            new MenuItem(){ Text = "Edit", Icon="edit", CommandName="BeginEdit" },
+            new MenuItem(){ Text = "Delete", Icon="delete", Action = DeleteItem }
         };
 
         // generate data for the grid
diff --git a/components/contextmenu/navigation.md b/components/contextmenu/navigation.md
index 161811b483..4bafd78b24 100644
--- a/components/contextmenu/navigation.md
+++ b/components/contextmenu/navigation.md
@@ -47,26 +47,26 @@ To use the Context Menu for navigating between pages:
             {
                 Text = "Contact us",
                 Url = "/contacts",
-                Icon = IconName.Email
+                Icon = "email"
             },
             new MenuModel()
             {
                 Text = "Settings",
                 Url = "/settings",
-                Icon = IconName.Gear,
+                Icon = "gear",
                 Items = new List<MenuModel>()
-            {
+                {
                     new MenuModel()
                     {
                         Text = "Profile Settings",
                         Url = "/profile",
-                        Icon = IconName.User
+                        Icon = "user"
                     },
                     new MenuModel()
                     {
                         Text = "Language Settings",
                         Url = "/language",
-                        Icon = IconName.Table
+                        Icon = "globe"
                     }
                 }
             }
diff --git a/components/contextmenu/overview.md b/components/contextmenu/overview.md
index 10c93b6e0b..ac5767d15c 100644
--- a/components/contextmenu/overview.md
+++ b/components/contextmenu/overview.md
@@ -55,7 +55,7 @@ In addition to built-in [navigation capabilities]({%slug contextmenu-navigation%
             new ContextMenuItem
             {
                 Text = "More Info",
-                Icon = IconName.Information,
+                Icon = "information",
                 CommandName = "info"
             },
             new ContextMenuItem
@@ -70,13 +70,13 @@ In addition to built-in [navigation capabilities]({%slug contextmenu-navigation%
                     new ContextMenuItem
                     {
                         Text = "Delete",
-                        Icon = IconName.Delete,
+                        Icon = "delete",
                         CommandName = "delete"
                     },
                     new ContextMenuItem
                     {
                         Text = "Report",
-                        Icon = IconName.Cancel,
+                        Icon = "cancel",
                         CommandName = "report"
                     }
                 }
diff --git a/components/drawer/data-bind.md b/components/drawer/data-bind.md
index e5cb8a9d19..9aa6a569d6 100644
--- a/components/drawer/data-bind.md
+++ b/components/drawer/data-bind.md
@@ -76,8 +76,8 @@ https://docs.telerik.com/blazor-ui/components/drawer/navigation
     IEnumerable<DrawerItem> Data { get; set; } =
         new List<DrawerItem>
         {
-            new DrawerItem { ItemText = "Counter", ItemIcon = IconName.Plus, ItemUrl = "counter" },
-            new DrawerItem { ItemText = "FetchData", ItemIcon = IconName.GridLayout, ItemUrl = "fetchdata" },
+            new DrawerItem { ItemText = "Counter", ItemIcon = "plus", ItemUrl = "counter" },
+            new DrawerItem { ItemText = "FetchData", ItemIcon = "grid-layout", ItemUrl = "fetchdata" },
         };
 
     public class DrawerItem
diff --git a/components/drawer/events.md b/components/drawer/events.md
index f02653ac41..388dbc36a2 100644
--- a/components/drawer/events.md
+++ b/components/drawer/events.md
@@ -55,8 +55,8 @@ The `SelectedItemChanged` event fires every time the user clicks on a new item f
     public IEnumerable<DrawerItem> Data { get; set; } =
         new List<DrawerItem>
         {
-            new DrawerItem { Text = "Counter", Icon = IconName.Plus},
-            new DrawerItem { Text = "FetchData", Icon = IconName.GridLayout},
+            new DrawerItem { Text = "Counter", Icon = "plus"},
+            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
                 };
 
     public class DrawerItem
@@ -81,7 +81,7 @@ The `ExpandedChanged` event fires every time the component's state is changed -
 
 @if (!Expanded)
 {
-    <TelerikButton OnClick="@(() => DrawerRef.ExpandAsync())" Icon="@IconName.Menu">Expand Drawer</TelerikButton>
+    <TelerikButton OnClick="@(() => DrawerRef.ExpandAsync())" Icon="menu">Expand Drawer</TelerikButton>
 }
 
 <TelerikDrawer Expanded="@Expanded"
@@ -113,8 +113,8 @@ The `ExpandedChanged` event fires every time the component's state is changed -
     public IEnumerable<DrawerItem> Data { get; set; } =
         new List<DrawerItem>
         {
-            new DrawerItem { Text = "Counter", Icon = IconName.Plus},
-            new DrawerItem { Text = "FetchData", Icon = IconName.GridLayout},
+            new DrawerItem { Text = "Counter", Icon = "plus"},
+            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
          };
 
     public class DrawerItem
diff --git a/components/drawer/icons.md b/components/drawer/icons.md
index 5fd60050b9..c39b055eed 100644
--- a/components/drawer/icons.md
+++ b/components/drawer/icons.md
@@ -33,7 +33,7 @@ The `IconClassField` and `ImageUrlField` are rendered, respectively, as `<span c
                @ref="@DrawerRef"
                @bind-SelectedItem="@SelectedItem">
     <Content>
-        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu">Toggle drawer</TelerikButton>
+        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
         <div class="m-5">
             Selected Item: @SelectedItem?.Text
         </div>
@@ -46,9 +46,9 @@ The `IconClassField` and `ImageUrlField` are rendered, respectively, as `<span c
     DrawerItem SelectedItem { get; set; }
     IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>()
         {
-                new DrawerItem { Text = "Current Location", TelerikIcon = IconName.Pin},
-                new DrawerItem { Text = "Navigation", TelerikIcon = IconName.Globe},
-                new DrawerItem { Text = "Favourite Locations", TelerikIcon = IconName.Star},
+                new DrawerItem { Text = "Current Location", TelerikIcon = "pin"},
+                new DrawerItem { Text = "Navigation", TelerikIcon = "globe"},
+                new DrawerItem { Text = "Favourite Locations", TelerikIcon = "star"},
         };
 
     public class DrawerItem
diff --git a/components/drawer/mini-view.md b/components/drawer/mini-view.md
index 9327ca513a..071eee005d 100644
--- a/components/drawer/mini-view.md
+++ b/components/drawer/mini-view.md
@@ -24,7 +24,7 @@ To enable the mini view when the drawer is collapsed (minimized), set the `MiniM
 @* Click on the Toggle MiniMode button to enable or disable it. *@
 @* The same behavior will be observed in both Push and Overlay modes *@
 
-<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu">Toggle drawer</TelerikButton>
+<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
 <TelerikButton OnClick="@(() => MiniMode = !MiniMode)">Toggle MiniMode</TelerikButton>
 <TelerikDrawer Data="@Data"
                MiniMode="@MiniMode"
@@ -38,8 +38,8 @@ To enable the mini view when the drawer is collapsed (minimized), set the `MiniM
     public IEnumerable<DrawerItem> Data { get; set; } =
         new List<DrawerItem>
         {
-            new DrawerItem { Text = "Counter", Icon = IconName.Plus},
-            new DrawerItem { Text = "FetchData", Icon = IconName.GridLayout},
+            new DrawerItem { Text = "Counter", Icon = "plus"},
+            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
         };
 
     public class DrawerItem
diff --git a/components/drawer/modes.md b/components/drawer/modes.md
index e94fabdb26..b13bbf5e74 100644
--- a/components/drawer/modes.md
+++ b/components/drawer/modes.md
@@ -36,7 +36,7 @@ The drawer's height is dynamic based on the height of the content (you can chang
 @* This example shows how the drawer behaves in Push mode. It uses item selection to toggle the content for brevity. *@
 
 <div>
-    <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu">Toggle drawer</TelerikButton>
+    <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
     <TelerikDrawer @bind-Expanded="@Expanded"
                    Data="@Data"
                    MiniMode="true"
@@ -61,8 +61,8 @@ The drawer's height is dynamic based on the height of the content (you can chang
     public IEnumerable<DrawerItem> Data { get; set; } =
         new List<DrawerItem>
         {
-            new DrawerItem { Text = "Counter", Icon = IconName.Plus},
-            new DrawerItem { Text = "FetchData", Icon = IconName.GridLayout},
+            new DrawerItem { Text = "Counter", Icon = "plus"},
+            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
         };
 
     public class DrawerItem
@@ -86,7 +86,7 @@ When `Mode` is set to `Overlay`, the Drawer's navigation is on top of the conten
 You may want to add padding to the left of the content so that it is not overlapped by the Drawer in its MiniMode. *@
 
 <div class="pl-4">
-    <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu">Toggle drawer</TelerikButton>
+    <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
 </div>
 <TelerikDrawer @bind-Expanded="@Expanded"
                Data="@Data"
@@ -110,8 +110,8 @@ You may want to add padding to the left of the content so that it is not overlap
     public IEnumerable<DrawerItem> Data { get; set; } =
         new List<DrawerItem>
         {
-            new DrawerItem { Text = "Counter", Icon = IconName.Plus},
-            new DrawerItem { Text = "FetchData", Icon = IconName.GridLayout},
+            new DrawerItem { Text = "Counter", Icon = "plus"},
+            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
         };
 
     public class DrawerItem
diff --git a/components/drawer/navigation.md b/components/drawer/navigation.md
index adc400a2ab..f42287d4c5 100644
--- a/components/drawer/navigation.md
+++ b/components/drawer/navigation.md
@@ -44,8 +44,8 @@ To use the Drawer for navigating between pages:
         {
             new DrawerItem { Text = "Home", Url = "/", Icon = "home" },
             new DrawerItem { IsSeparator = true },
-            new DrawerItem { Text = "Counter", Url = "counter", Icon = IconName.PlusOutline },
-            new DrawerItem { Text = "FetchData", Url = "fetchdata", Icon = IconName.Grid }
+            new DrawerItem { Text = "Counter", Url = "counter", Icon = "plus-outline" },
+            new DrawerItem { Text = "FetchData", Url = "fetchdata", Icon = "grid" }
         };
 
     public class DrawerItem
diff --git a/components/drawer/overview.md b/components/drawer/overview.md
index 8ccfb3fc51..e743499f5a 100644
--- a/components/drawer/overview.md
+++ b/components/drawer/overview.md
@@ -30,7 +30,7 @@ The <a href="https://www.telerik.com/blazor-ui/drawer" target="_blank">Blazor Dr
                @ref="@DrawerRef"
                @bind-SelectedItem="@SelectedItem">
     <Content>
-        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu">Toggle drawer</TelerikButton>
+        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
 
         @* Place your contents here - it can be as simple as text, it can be conditional components or components that
             take the selected item as a parameter, or even the @Body tag for navigation if you place the
@@ -47,8 +47,8 @@ The <a href="https://www.telerik.com/blazor-ui/drawer" target="_blank">Blazor Dr
     IEnumerable<DrawerItem> Data { get; set; } =
         new List<DrawerItem>
         {
-            new DrawerItem { Text = "Counter", Icon = IconName.Plus},
-            new DrawerItem { Text = "FetchData", Icon = IconName.GridLayout},
+            new DrawerItem { Text = "Counter", Icon = "plus"},
+            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
         };
 
     public class DrawerItem
@@ -111,7 +111,7 @@ The Drawer methods are accessible through it's reference. The reference exposes
 @* The drawer is a generic components and its reference type depends on the type of the model it is bound to. *@
 
 <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())"
-               Icon="@IconName.Menu">
+               Icon="menu">
     Toggle drawer
 </TelerikButton>
 
@@ -126,8 +126,8 @@ The Drawer methods are accessible through it's reference. The reference exposes
     IEnumerable<DrawerItem> Data { get; set; } =
         new List<DrawerItem>
         {
-            new DrawerItem { Text = "Counter", Icon = IconName.Plus},
-            new DrawerItem { Text = "FetchData", Icon = IconName.GridLayout},
+            new DrawerItem { Text = "Counter", Icon = "plus"},
+            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
         };
 
     public class DrawerItem
diff --git a/components/drawer/selection.md b/components/drawer/selection.md
index f38ea1ed0e..ea5d0179e2 100644
--- a/components/drawer/selection.md
+++ b/components/drawer/selection.md
@@ -29,7 +29,7 @@ If you use the drawer for [page navigation]({%slug drawer-navigation%}), the sel
                @bind-SelectedItem="@selectedItem"
                @ref="@DrawerRef">
     <Content>
-        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu">Toggle drawer</TelerikButton>
+        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
         <div class="text-info">
             Content for the @selectedItem?.Text item
         </div>
@@ -42,8 +42,8 @@ If you use the drawer for [page navigation]({%slug drawer-navigation%}), the sel
     public List<DrawerItem> Data { get; set; } =
         new List<DrawerItem>
         {
-            new DrawerItem { Text = "Counter", Icon = IconName.Plus},
-            new DrawerItem { Text = "FetchData", Icon = IconName.GridLayout},
+            new DrawerItem { Text = "Counter", Icon = "plus"},
+            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
          };
 
     protected override void OnInitialized()
diff --git a/components/drawer/templates.md b/components/drawer/templates.md
index dc9a934fe5..1b00104c25 100644
--- a/components/drawer/templates.md
+++ b/components/drawer/templates.md
@@ -26,7 +26,7 @@ This template receives a `context` argument that is of the data model type and r
 ````CSHTML
 @* This example shows how to control the rendering of the items in the Drawer menu *@
 
-<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu" />
+<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu" />
 
 <TelerikDrawer @bind-Expanded="@Expanded"
                Data="@Data"
@@ -55,10 +55,10 @@ This template receives a `context` argument that is of the data model type and r
     public bool Expanded { get; set; } = true;
     public IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>
     {
-        new DrawerItem {Text = "Shopping Cart", Icon = IconName.Cart, Description = "Items in shopping cart"},
-        new DrawerItem {Text = "Notifications", Icon = IconName.Notification, Description = "My profile notifications"},
-        new DrawerItem {Text = "Calendar", Icon = IconName.Calendar, Description = "My events"},
-        new DrawerItem {Text = "Settings", Icon = IconName.Gear, Description = "My profile settings"},
+        new DrawerItem {Text = "Shopping Cart", Icon = "cart", Description = "Items in shopping cart"},
+        new DrawerItem {Text = "Notifications", Icon = "notification", Description = "My profile notifications"},
+        new DrawerItem {Text = "Calendar", Icon = "calendar", Description = "My events"},
+        new DrawerItem {Text = "Settings", Icon = "gear", Description = "My profile settings"},
     };
 
     public class DrawerItem
@@ -104,7 +104,7 @@ Using the `<Template>` and `<ItemTemplate>` together is not possible - the Templ
     <Template>
         @* the header *@
         <div>
-            <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu" />
+            <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu" />
             @if (DrawerExpanded)
             {
                 <div class="text-info" style="border-bottom:solid; font-weight: bold; margin-bottom: 3em; white-space:nowrap">
@@ -156,7 +156,7 @@ Using the `<Template>` and `<ItemTemplate>` together is not possible - the Templ
             <div style="text-align: center; margin-top: 3em; padding-top: 2em; border-top: 2px solid black; white-space:nowrap">
                 <img src="user-avatar.png" alt="my avatar" style="border-radius: 50%; width: 50px; height: 50px;" />
                 <br /><br />
-                <TelerikButton Icon="@IconName.Logout" Primary="true">Log Out</TelerikButton>
+                <TelerikButton Icon="logout" Primary="true">Log Out</TelerikButton>
             </div>
         }
     </Template>
@@ -171,10 +171,10 @@ Using the `<Template>` and `<ItemTemplate>` together is not possible - the Templ
     public bool DrawerExpanded { get; set; } = true;
     public IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>
 {
-        new DrawerItem {Text = "Shopping Cart", Icon = IconName.Cart, Description = "Items in shopping cart"},
-        new DrawerItem {Text = "Settings", Icon = IconName.Gear, Description = "My profile settings"},
-        new DrawerItem {Text = "Notifications", Icon = IconName.Notification, Description = "My profile notifications"},
-        new DrawerItem {Text = "Calendar", Icon = IconName.Calendar, Description = "My events"},
+        new DrawerItem {Text = "Shopping Cart", Icon = "cart", Description = "Items in shopping cart"},
+        new DrawerItem {Text = "Settings", Icon = "gear", Description = "My profile settings"},
+        new DrawerItem {Text = "Notifications", Icon = "notification", Description = "My profile notifications"},
+        new DrawerItem {Text = "Calendar", Icon = "calendar", Description = "My events"},
     };
 
     public string GetSelectedItemClass(DrawerItem item)
diff --git a/components/editor/custom-tool.md b/components/editor/custom-tool.md
index 038ae021fd..f46f7d155f 100644
--- a/components/editor/custom-tool.md
+++ b/components/editor/custom-tool.md
@@ -93,7 +93,7 @@ In this section you can find the following examples:
 <TelerikEditor @ref="@EditorRef" Tools="@Tools" @bind-Value="@TheEditorContent">
     <EditorCustomTools>
         <EditorCustomTool Name="ImportantFragment">
-            <TelerikButton OnClick="@MarkImportant" Icon="@IconName.Star"></TelerikButton>
+            <TelerikButton OnClick="@MarkImportant" Icon="star"></TelerikButton>
         </EditorCustomTool>
     </EditorCustomTools>
 </TelerikEditor>
diff --git a/components/editor/toolbar.md b/components/editor/toolbar.md
index d6fa0f7ff8..99d5311504 100644
--- a/components/editor/toolbar.md
+++ b/components/editor/toolbar.md
@@ -200,7 +200,7 @@ When adding a built-in tool to the collection, you can set various parameters to
             {
                 Title = "My Custom Underline Title",
                 Class = "special-underine",
-                Icon = IconName.Gear,
+                Icon = "gear",
             }
         );
         MyTools.Add(firstGroup);
diff --git a/components/grid/export/csv.md b/components/grid/export/csv.md
index bfa6ac547e..4cf8afd158 100644
--- a/components/grid/export/csv.md
+++ b/components/grid/export/csv.md
@@ -21,7 +21,7 @@ To enable the grid CSV Export, add a [command button]({%slug components/grid/col
 
 ````
 <GridToolBar>
-    <GridCommandButton Command="CsvExport" Icon="@IconName.FileCsv">Export to CSV</GridCommandButton>
+    <GridCommandButton Command="CsvExport" Icon="file-csv">Export to CSV</GridCommandButton>
 </GridToolBar>
 ````
 
@@ -40,7 +40,7 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp
              FilterMode="@GridFilterMode.FilterRow" Groupable="true">
 
     <GridToolBar>
-        <GridCommandButton Command="CsvExport" Icon="@IconName.FileCsv">Export to CSV</GridCommandButton>
+        <GridCommandButton Command="CsvExport" Icon="file-csv">Export to CSV</GridCommandButton>
         <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
     </GridToolBar>
 
diff --git a/components/grid/export/excel.md b/components/grid/export/excel.md
index 6f1e8f168a..52d7b27889 100644
--- a/components/grid/export/excel.md
+++ b/components/grid/export/excel.md
@@ -21,7 +21,7 @@ To enable the grid Excel Export, add a [command button]({%slug components/grid/c
 
 ````
 <GridToolBar>
-    <GridCommandButton Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
+    <GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
 </GridToolBar>
 ````
 
@@ -40,7 +40,7 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE
              FilterMode="@GridFilterMode.FilterRow" Groupable="true" >
 
     <GridToolBar>
-        <GridCommandButton Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
+        <GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
         <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
     </GridToolBar>
 
diff --git a/components/grid/templates/column-header.md b/components/grid/templates/column-header.md
index b7aad75742..fa65001b75 100644
--- a/components/grid/templates/column-header.md
+++ b/components/grid/templates/column-header.md
@@ -50,7 +50,7 @@ Bound columns render the name of the field or their `Title` in their header. Thr
         <GridColumn>
             <HeaderTemplate>
                 <span class="k-display-flex k-align-items-center">
-                    <TelerikIcon Icon="@IconName.Image" />
+                    <TelerikIcon Icon="image" />
                     Column with Icon
                 </span>
             </HeaderTemplate>
diff --git a/components/listview/editing.md b/components/listview/editing.md
index bb672f85d8..85866651cb 100644
--- a/components/listview/editing.md
+++ b/components/listview/editing.md
@@ -43,20 +43,20 @@ The CUD operations are implemented through dedicated events that let you alter t
         <div style="border: 1px solid green; margin: 10px; padding: 10px; display: inline-block;">
             <TelerikTextBox @bind-Value="@context.Name" Label="Name" /><br />
             <TelerikDropDownList Data="@Teams" @bind-Value="@context.Team" />
-            <ListViewCommandButton Command="Save" Icon="@IconName.Save">Save</ListViewCommandButton>
-            <ListViewCommandButton Command="Cancel" Icon="@IconName.Cancel">Cancel</ListViewCommandButton>
+            <ListViewCommandButton Command="Save" Icon="save">Save</ListViewCommandButton>
+            <ListViewCommandButton Command="Cancel" Icon="cancel">Cancel</ListViewCommandButton>
         </div>
     </EditTemplate>
     <Template>
         <div style="border: 1px solid black; margin: 10px; padding: 10px; display: inline-block;">
             Employee: @context.Id <br />
             Name: @context.Name in team: @context.Team
-            <ListViewCommandButton Command="Edit" Icon="@IconName.Edit">Edit</ListViewCommandButton>
-            <ListViewCommandButton Command="Delete" Icon="@IconName.Delete">Delete</ListViewCommandButton>
+            <ListViewCommandButton Command="Edit" Icon="edit">Edit</ListViewCommandButton>
+            <ListViewCommandButton Command="Delete" Icon="delete">Delete</ListViewCommandButton>
         </div>
     </Template>
     <HeaderTemplate>
-        <ListViewCommandButton Command="Add" Icon="@IconName.Plus">Add Employee</ListViewCommandButton>
+        <ListViewCommandButton Command="Add" Icon="plus">Add Employee</ListViewCommandButton>
         <p>In this sample, the first item will not open for editing because of the code in the OnEdit handler</p>
     </HeaderTemplate>
 </TelerikListView>
diff --git a/components/loadercontainer/template.md b/components/loadercontainer/template.md
index f73447d9ba..e1cb07dcd1 100644
--- a/components/loadercontainer/template.md
+++ b/components/loadercontainer/template.md
@@ -29,7 +29,7 @@ This example shows how to change the contents of the loading text and animation
     <Template>
         <TelerikLoader></TelerikLoader>
         <div>
-            <span><TelerikIcon Icon="@IconName.Information"></TelerikIcon></span>
+            <span><TelerikIcon Icon="information"></TelerikIcon></span>
             <span>Please wait, the application is loading...</span>
         </div>
     </Template>
@@ -95,7 +95,7 @@ You can use CSS to target the DOM elements that create the Panel around the temp
     <Template>
         <TelerikLoader ThemeColor="light"></TelerikLoader>
         <div>
-            <span><TelerikIcon Icon="@IconName.Information"></TelerikIcon></span>
+            <span><TelerikIcon Icon="information"></TelerikIcon></span>
             <span style="color:white">Loading...</span>
         </div>
     </Template>
diff --git a/components/menu/events.md b/components/menu/events.md
index 86705b1522..37b6f375e4 100644
--- a/components/menu/events.md
+++ b/components/menu/events.md
@@ -52,30 +52,30 @@ Last clicked item: @ClickedItem?.Text
             new MenuItem()
             {
                 Text = "Share",
-                Icon = IconName.Share,
+                Icon = "share",
                 Items = new List<MenuItem>()
                 {
                     new MenuItem()
                     {
                         Text = "FaceBook",
-                        Icon = IconName.Facebook
+                        Icon = "facebook"
                     },
                     new MenuItem()
                     {
                         Text = "LinkedIn",
-                        Icon = IconName.Linkedin
+                        Icon = "linkedin"
                     },
                     new MenuItem()
                     {
                         Text = "Twitter",
-                        Icon = IconName.Twitter
+                        Icon = "twitter"
                     },
                 }
             },
             new MenuItem()
             {
                 Text = "Map Location",
-                Icon = IconName.MarkerPin
+                Icon = "marker-pin"
             }
         };
 
diff --git a/components/menu/icons.md b/components/menu/icons.md
index 5da1e01a5e..1016280f84 100644
--- a/components/menu/icons.md
+++ b/components/menu/icons.md
@@ -47,7 +47,7 @@ Make sure that you also refernce the OpenIconic font that comes with the Blazor
             new MenuModel()
             {
                 Text = "IconField",
-                TelerikIcon = IconName.Email
+                TelerikIcon = "email"
             },
             new MenuModel()
             {
diff --git a/components/menu/navigation.md b/components/menu/navigation.md
index de7e513c58..06ac25eba4 100644
--- a/components/menu/navigation.md
+++ b/components/menu/navigation.md
@@ -43,26 +43,26 @@ To use the Menu for navigating between pages:
             {
                 Text = "Contact us",
                 Url = "/contacts",
-                Icon = IconName.Email
+                Icon = "email"
             },
             new MenuModel()
             {
                 Text = "Settings",
                 Url = "/settings",
-                Icon = IconName.Gear,
+                Icon = "gear",
                 Items = new List<MenuModel>()
                 {
                     new MenuModel()
                     {
                         Text = "Profile Settings",
                         Url = "/profile",
-                        Icon = IconName.User
+                        Icon = "user"
                     },
                     new MenuModel()
                     {
                         Text = "Language Settings",
                         Url = "/language",
-                        Icon = IconName.Table
+                        Icon = "globe"
                     }
                 }
             }
diff --git a/components/menu/orientation.md b/components/menu/orientation.md
index 448d2d5f98..3747e92a56 100644
--- a/components/menu/orientation.md
+++ b/components/menu/orientation.md
@@ -51,25 +51,25 @@ The default orientation is horizontal.
             new MenuItem()
             {
                 Text = "Share",
-                Icon = IconName.Share,
+                Icon = "share",
                 Items = new List<MenuItem>()
                 {
                     new MenuItem()
                     {
                         Text = "FaceBook",
-                        Icon = IconName.Facebook,
+                        Icon = "facebook",
                         Url = "https://facebook.com"
                     },
                     new MenuItem()
                     {
                         Text = "LinkedIn",
-                        Icon = IconName.Linkedin,
+                        Icon = "linkedin",
                         Url = "https://linkedin.com"
                     },
                     new MenuItem()
                     {
                         Text = "Twitter",
-                        Icon = IconName.Twitter,
+                        Icon = "twitter",
                         Url = "https://twitter.com"
                     },
                 }
@@ -77,7 +77,7 @@ The default orientation is horizontal.
             new MenuItem()
             {
                 Text = "Map Location",
-                Icon = IconName.MarkerPin,
+                Icon = "marker-pin",
                 Url = "https://maps.google.com"
             }
         };
diff --git a/components/notification/open-close-hide.md b/components/notification/open-close-hide.md
index e28fad55a6..0eddd491b3 100644
--- a/components/notification/open-close-hide.md
+++ b/components/notification/open-close-hide.md
@@ -73,7 +73,7 @@ You can pass the entire [NotificationModel]({%slug notification-overview%}#notif
             Text = "My Notification",
             ThemeColor = "success",
             ShowIcon = true,
-            Icon = IconName.Star,
+            Icon = "star",
             Closable = false
         });
     }
@@ -118,7 +118,7 @@ You can also let the user dismiss a notification message before that timer elaps
             ThemeColor = "success",
             Closable = false,
             CloseAfter = 2000,
-            Icon = IconName.Star
+            Icon = "star"
         });
     }
 }
@@ -148,7 +148,7 @@ You can prevent the notification from closing automatically and let the user clo
             ThemeColor = "success",
             Closable = true,
             CloseAfter = 0,
-            Icon = IconName.Star
+            Icon = "star"
         });
     }
 }
diff --git a/components/scheduler/templates/appointment.md b/components/scheduler/templates/appointment.md
index 630159a2ed..a42efba194 100644
--- a/components/scheduler/templates/appointment.md
+++ b/components/scheduler/templates/appointment.md
@@ -105,7 +105,7 @@ You can also style the entire appointments by adding a class to their wrapping e
                 Description = "Kick off the new project.",
                 Start = new DateTime(2019, 11, 25, 9, 30, 0),
                 End = new DateTime(2019, 11, 25, 12, 45, 0),
-                Icon = IconName.Warning
+                Icon = "warning"
             },
 
             new SchedulerAppointment
diff --git a/components/stockchart/tooltip/overview.md b/components/stockchart/tooltip/overview.md
index 1ca35d1a5e..2ec0ee2308 100644
--- a/components/stockchart/tooltip/overview.md
+++ b/components/stockchart/tooltip/overview.md
@@ -446,7 +446,7 @@ The available series data point information in the `context` is:
                           LowField="@nameof(StockDataPoint.Low)">
             <StockChartSeriesTooltip Visible="true">
                 <Template>
-                    <TelerikIcon Icon="@IconName.Information" />
+                    <TelerikIcon Icon="information" />
                     The high value for @context.SeriesName is @(((context.DataItem as StockDataPoint).High).ToString("C2"))
                 </Template>
             </StockChartSeriesTooltip>
diff --git a/components/stockchart/tooltip/shared.md b/components/stockchart/tooltip/shared.md
index db07ba4366..638a781c4c 100644
--- a/components/stockchart/tooltip/shared.md
+++ b/components/stockchart/tooltip/shared.md
@@ -192,7 +192,7 @@ Each `Point` contains the following data:
                 foreach (var point in points)
                 {
                     <div>
-                        <TelerikIcon Icon="@IconName.Information" />
+                        <TelerikIcon Icon="information" />
                         <strong>Product name: @point.SeriesName</strong> has
                         High value: @(((point.DataItem as StockDataPoint).High).ToString("C2"))
                     </div>
diff --git a/components/tilelayout/state.md b/components/tilelayout/state.md
index c3642d33e7..2daf17d2d0 100644
--- a/components/tilelayout/state.md
+++ b/components/tilelayout/state.md
@@ -35,10 +35,10 @@ You can consider saving the current state of the component in events that it exp
 @inject LocalStorage LocalStorage
 @inject IJSRuntime JsInterop
 
-<TelerikButton OnClick="@SaveState" Icon="@IconName.Save" Class="mr-sm">Save State</TelerikButton>
-<TelerikButton OnClick="@ReloadPage" Icon="@IconName.Reload" Class="mr-sm">Reload the page</TelerikButton>
-<TelerikButton OnClick="@LoadState" Icon="@IconName.Download" Class="mr-sm">Load last State</TelerikButton>
-<TelerikButton OnClick="@SetExplicitState" Icon="@IconName.Gear" Class="mr-sm">Configure State</TelerikButton>
+<TelerikButton OnClick="@SaveState" Icon="save" Class="mr-sm">Save State</TelerikButton>
+<TelerikButton OnClick="@ReloadPage" Icon="reload" Class="mr-sm">Reload the page</TelerikButton>
+<TelerikButton OnClick="@LoadState" Icon="download" Class="mr-sm">Load last State</TelerikButton>
+<TelerikButton OnClick="@SetExplicitState" Icon="gear" Class="mr-sm">Configure State</TelerikButton>
 
 <TelerikTileLayout @ref="@TileLayoutInstance"
                    Columns="3"
diff --git a/components/togglebutton/icons.md b/components/togglebutton/icons.md
index c56accc6b0..17d1d3e64a 100644
--- a/components/togglebutton/icons.md
+++ b/components/togglebutton/icons.md
@@ -32,7 +32,7 @@ It also shows how to use telerik icons, raster icons and sprite images*@
 
 <TelerikToggleButton SpriteClass="@( FlagSelected ? "flag netherlands" : "flag brazil")" @bind-Selected="@FlagSelected">Sprite</TelerikToggleButton>
 
-<TelerikToggleButton Icon="@( FontSelected ? IconName.VolumeOff : IconName.VolumeUp )" @bind-Selected="@FontSelected">Font Icon</TelerikToggleButton>
+<TelerikToggleButton Icon="@( FontSelected ? "volume-off" : "volume-up" )" @bind-Selected="@FontSelected">Font Icon</TelerikToggleButton>
 
 <TelerikToggleButton ImageUrl="@RasterIconUrl" @bind-Selected="@RasterSelected">Image URL</TelerikToggleButton>
 
diff --git a/components/toolbar/built-in-tools.md b/components/toolbar/built-in-tools.md
index a3d01adad4..b1c098d5c4 100644
--- a/components/toolbar/built-in-tools.md
+++ b/components/toolbar/built-in-tools.md
@@ -50,9 +50,9 @@ You can customize the buttons using the following features:
 @*This example shows the TelerikToolBar with ToolBarButtons and their features*@
 
 <TelerikToolBar>
-    <ToolBarButton Icon="@IconName.Bold" Class="myBoldButton" Enabled="@true" Visible="true" Title="Bold Button" OnClick="@OnBold">Bold</ToolBarButton>
-    <ToolBarButton Icon="@IconName.Italic" Class="myItalicButton" Enabled="@false" Visible="true" Title="Italic Button" OnClick="@OnItalic">Italic</ToolBarButton>
-    <ToolBarButton Icon="@IconName.Underline" Class="myUnderlineButton" Enabled="@true" Visible="true" Title="Underline Button" OnClick="@OnUnderline">Underline</ToolBarButton>
+    <ToolBarButton Icon="bold" Class="myBoldButton" Enabled="@true" Visible="true" Title="Bold Button" OnClick="@OnBold">Bold</ToolBarButton>
+    <ToolBarButton Icon="italic" Class="myItalicButton" Enabled="@false" Visible="true" Title="Italic Button" OnClick="@OnItalic">Italic</ToolBarButton>
+    <ToolBarButton Icon="underline" Class="myUnderlineButton" Enabled="@true" Visible="true" Title="Underline Button" OnClick="@OnUnderline">Underline</ToolBarButton>
 </TelerikToolBar>
 
 @code {
@@ -112,7 +112,7 @@ You can customize the toggle buttons using the following features:
     <ToolBarToggleButton @bind-Selected="@Selected" 
                          Enabled="true" 
                          Class="myToggleFullScreenButton" 
-                         Icon="@IconName.ToggleFullScreenMode" 
+                         Icon="toggle-full-screen-mode" 
                          OnClick="@ToggleFullScreen">
                             Toggle Fullscreen
     </ToolBarToggleButton>
@@ -168,9 +168,9 @@ You can customize the groups using the following features:
                         SelectionMode="@ButtonGroupSelectionMode.Multiple" 
                         Class="formattingButtons" 
                         Enabled="true">
-        <ToolBarButton Icon="@IconName.Bold">Bold</ToolBarButton>
-        <ToolBarButton Icon="@IconName.Italic">Italic</ToolBarButton>
-        <ToolBarButton Icon="@IconName.Underline">Underline</ToolBarButton>
+        <ToolBarButton Icon="bold">Bold</ToolBarButton>
+        <ToolBarButton Icon="italic">Italic</ToolBarButton>
+        <ToolBarButton Icon="underline">Underline</ToolBarButton>
     </ToolBarButtonGroup>
 </TelerikToolBar>
 ````
diff --git a/components/toolbar/events.md b/components/toolbar/events.md
index 947ae9fe60..4513d46184 100644
--- a/components/toolbar/events.md
+++ b/components/toolbar/events.md
@@ -27,7 +27,7 @@ The `OnClick` event fires when the user clicks on a button in the ToolBar (also
 @*When clicking on the button a message will be printed in your console*@
 
 <TelerikToolBar>
-    <ToolBarButton Icon="@IconName.HyperlinkEmail" OnClick="@OnHyperlinkClick">Hyperlink</ToolBarButton>
+    <ToolBarButton Icon="hyperlink-email" OnClick="@OnHyperlinkClick">Hyperlink</ToolBarButton>
 </TelerikToolBar>
 
 
diff --git a/components/toolbar/overview.md b/components/toolbar/overview.md
index 2fba0b5da5..934d178085 100644
--- a/components/toolbar/overview.md
+++ b/components/toolbar/overview.md
@@ -34,14 +34,14 @@ To use the Telerik Toolbar component:
 
 <TelerikToolBar>
     <ToolBarButtonGroup>
-        <ToolBarButton Icon="@IconName.Bold" OnClick="@OnBold">Bold</ToolBarButton>
-        <ToolBarButton Icon="@IconName.Italic" OnClick="@OnItalic">Italic</ToolBarButton>
-        <ToolBarButton Icon="@IconName.Underline" OnClick="@OnUnderline">Underline</ToolBarButton>
+        <ToolBarButton Icon="bold" OnClick="@OnBold">Bold</ToolBarButton>
+        <ToolBarButton Icon="italic" OnClick="@OnItalic">Italic</ToolBarButton>
+        <ToolBarButton Icon="underline" OnClick="@OnUnderline">Underline</ToolBarButton>
     </ToolBarButtonGroup>
 
     <ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
 
-    <ToolBarButton Icon="@IconName.Undo">Undo</ToolBarButton>
+    <ToolBarButton Icon="undo">Undo</ToolBarButton>
 </TelerikToolBar>
 
 <br />
@@ -79,7 +79,7 @@ To use the Telerik Toolbar component:
 <TelerikToolBar @ref="@ToolbarReference">
     <ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
 
-    <ToolBarButton Icon="@IconName.Undo">Undo</ToolBarButton>
+    <ToolBarButton Icon="undo">Undo</ToolBarButton>
 </TelerikToolBar>
 
 @code {
diff --git a/components/toolbar/separators.md b/components/toolbar/separators.md
index 04954bf773..e640023824 100644
--- a/components/toolbar/separators.md
+++ b/components/toolbar/separators.md
@@ -28,14 +28,14 @@ You can visually separate the items in the Telerik ToolBar for Blazor. Depending
 
 <TelerikToolBar>
     <ToolBarButtonGroup>
-        <ToolBarButton Icon="@IconName.Bold">Bold</ToolBarButton>
-        <ToolBarButton Icon="@IconName.Italic">Italic</ToolBarButton>
-        <ToolBarButton Icon="@IconName.Underline">Underline</ToolBarButton>
+        <ToolBarButton Icon="bold">Bold</ToolBarButton>
+        <ToolBarButton Icon="italic">Italic</ToolBarButton>
+        <ToolBarButton Icon="underline">Underline</ToolBarButton>
     </ToolBarButtonGroup>
     <ToolBarSpacer />
     <ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
     <ToolBarSeparator />
-    <ToolBarButton Icon="@IconName.Undo">Undo</ToolBarButton>
+    <ToolBarButton Icon="undo">Undo</ToolBarButton>
 </TelerikToolBar>
 
 
diff --git a/components/toolbar/templated-item.md b/components/toolbar/templated-item.md
index 8f7c00a7c2..7c5ef7a3b5 100644
--- a/components/toolbar/templated-item.md
+++ b/components/toolbar/templated-item.md
@@ -25,9 +25,9 @@ You cannot add those Templated items to a `ToolBarButtonGroup`.
 
 <TelerikToolBar>
     <ToolBarButtonGroup>
-        <ToolBarButton Icon="@IconName.Bold">Bold</ToolBarButton>
-        <ToolBarButton Icon="@IconName.Italic">Italic</ToolBarButton>
-        <ToolBarButton Icon="@IconName.Underline">Underline</ToolBarButton>
+        <ToolBarButton Icon="bold">Bold</ToolBarButton>
+        <ToolBarButton Icon="italic">Italic</ToolBarButton>
+        <ToolBarButton Icon="underline">Underline</ToolBarButton>
     </ToolBarButtonGroup>
     <ToolBarSeparator />
 
diff --git a/components/treelist/columns/command.md b/components/treelist/columns/command.md
index d35e24802d..59d02ec867 100644
--- a/components/treelist/columns/command.md
+++ b/components/treelist/columns/command.md
@@ -60,10 +60,10 @@ The `OnClick` handler of the commands receives an argument of type `TreeListComm
     <TreeListColumns>
 
         <TreeListCommandColumn Width="250px">
-            <TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true" OnClick="@CustomSaveClick">Update</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
-            <TreeListCommandButton Command="MyCustomCommand" Icon="@IconName.Gear" OnClick="@MyCustomCommandHandler">Custom Command</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit" Icon="edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true" OnClick="@CustomSaveClick">Update</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            <TreeListCommandButton Command="MyCustomCommand" Icon="gear" OnClick="@MyCustomCommandHandler">Custom Command</TreeListCommandButton>
         </TreeListCommandColumn>
 
         <TreeListColumn Field="Name" Expandable="true" Width="320px" />
diff --git a/components/treelist/editing/incell.md b/components/treelist/editing/incell.md
index feca579a89..a70bfc8700 100644
--- a/components/treelist/editing/incell.md
+++ b/components/treelist/editing/incell.md
@@ -45,10 +45,10 @@ Editing is cancelled for the first record.
     </TreeListToolBar>
     <TreeListColumns>
         <TreeListCommandColumn Width="200px">
-            <TreeListCommandButton Command="Add" Icon="@IconName.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@IconName.Delete">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            <TreeListCommandButton Command="Add" Icon="plus">Add Child</TreeListCommandButton>
+            <TreeListCommandButton Command="Delete" Icon="delete">Delete</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
         </TreeListCommandColumn>
 
         <TreeListColumn Field="Name" Expandable="true" Width="320px" />
diff --git a/components/treelist/editing/inline.md b/components/treelist/editing/inline.md
index 7eeb45245d..8a79203ee8 100644
--- a/components/treelist/editing/inline.md
+++ b/components/treelist/editing/inline.md
@@ -39,11 +39,11 @@ Editing is cancelled for the first record.
     </TreeListToolBar>
     <TreeListColumns>
         <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@IconName.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@IconName.Delete">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            <TreeListCommandButton Command="Add" Icon="plus">Add Child</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit" Icon="edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Delete" Icon="delete">Delete</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
         </TreeListCommandColumn>
 
         <TreeListColumn Field="Name" Expandable="true" Width="320px" />
diff --git a/components/treelist/editing/overview.md b/components/treelist/editing/overview.md
index 75854b52a2..df5cf98d60 100644
--- a/components/treelist/editing/overview.md
+++ b/components/treelist/editing/overview.md
@@ -74,11 +74,11 @@ Editing is cancelled for the first record.
     </TreeListToolBar>
     <TreeListColumns>
         <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@IconName.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@IconName.Delete">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            <TreeListCommandButton Command="Add" Icon="plus">Add Child</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit" Icon="edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Delete" Icon="delete">Delete</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
         </TreeListCommandColumn>
 
         <TreeListColumn Field="Name" Expandable="true" Width="320px" />
diff --git a/components/treelist/editing/popup.md b/components/treelist/editing/popup.md
index 15bab0fe9c..d2118c3c91 100644
--- a/components/treelist/editing/popup.md
+++ b/components/treelist/editing/popup.md
@@ -44,11 +44,11 @@ Editing is cancelled for the first record.
     </TreeListToolBar>
     <TreeListColumns>
         <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@IconName.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@IconName.Delete">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            <TreeListCommandButton Command="Add" Icon="plus">Add Child</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit" Icon="edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Delete" Icon="delete">Delete</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
         </TreeListCommandColumn>
 
         <TreeListColumn Field="Name" Expandable="true" Width="320px" />
diff --git a/components/treelist/state.md b/components/treelist/state.md
index 9b87620b6e..16676ed95f 100644
--- a/components/treelist/state.md
+++ b/components/treelist/state.md
@@ -647,11 +647,11 @@ In addition to that, you can also use the `EditItem`, `OriginalEditItem`, `Inser
     </TreeListToolBar>
     <TreeListColumns>
         <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@IconName.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@IconName.Delete">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            <TreeListCommandButton Command="Add" Icon="plus">Add Child</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit" Icon="edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Delete" Icon="delete">Delete</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
         </TreeListCommandColumn>
 
         <TreeListColumn Field="Name" Expandable="true" Width="320px" />
diff --git a/components/treelist/templates/column-header.md b/components/treelist/templates/column-header.md
index 35edc0cc1f..2032ca3fbc 100644
--- a/components/treelist/templates/column-header.md
+++ b/components/treelist/templates/column-header.md
@@ -47,7 +47,7 @@ Bound columns render the name of the field or their `Title` in their header. Thr
         <TreeListColumn>
             <HeaderTemplate>
                 <span class="k-display-flex k-align-items-center">
-                    <TelerikIcon Icon="@IconName.Image" />
+                    <TelerikIcon Icon="image" />
                     With Icon
                 </span>
             </HeaderTemplate>
diff --git a/components/treelist/templates/editor.md b/components/treelist/templates/editor.md
index 1a7a66aeaf..03eee482c5 100644
--- a/components/treelist/templates/editor.md
+++ b/components/treelist/templates/editor.md
@@ -30,9 +30,9 @@ If you need to perform logic more complex than simple data binding, use the chan
                  Width="850px">
     <TreeListColumns>
         <TreeListCommandColumn Width="100px">
-            <TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit" Icon="edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
         </TreeListCommandColumn>
 
         <TreeListColumn Field="Name" Expandable="true" Width="320px" />
diff --git a/components/window/actions.md b/components/window/actions.md
index ff7e6f90ee..441f481b5f 100644
--- a/components/window/actions.md
+++ b/components/window/actions.md
@@ -62,7 +62,7 @@ Custom actions can call C# directly
 
 <TelerikWindow Visible="true">
 	<WindowActions>
-		<WindowAction Name="MyAction" Icon="@IconName.Gear" OnClick="@MyCustomActionHandler" />
+		<WindowAction Name="MyAction" Icon="gear" OnClick="@MyCustomActionHandler" />
 	</WindowActions>
 	<WindowContent>
 		@result
@@ -96,10 +96,10 @@ You can mix custom actions with built-in actions, and you do not have to define
 <TelerikWindow Visible="true">
     <WindowActions>
         <WindowAction Name="Minimize" />
-        <WindowAction Name="MyAction" Icon="@IconName.Information" OnClick="@MyCustomActionHandler" />
+        <WindowAction Name="MyAction" Icon="information" OnClick="@MyCustomActionHandler" />
         <WindowAction Name="Maximize" />
         <WindowAction Hidden="@( string.IsNullOrEmpty(result) )"
-                      Icon="@IconName.ClearCss"
+                      Icon="clear-css"
                       Name="CustomActionWithAllParameters"
                       Title="my custom title attribute that is a tooltip when you hover the action"
                       OnClick="@( () => result = string.Empty )" />
diff --git a/knowledge-base/drawer-add-tooltip.md b/knowledge-base/drawer-add-tooltip.md
index cf53bb9f9f..24227d396a 100644
--- a/knowledge-base/drawer-add-tooltip.md
+++ b/knowledge-base/drawer-add-tooltip.md
@@ -39,7 +39,7 @@ If using a [TelerikTooltip](https://demos.telerik.com/blazor-ui/tooltip/overview
 <TelerikTooltip TargetSelector=".k-drawer-items span.k-icon[title]" />
 
 <p>
-    <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu">Toggle drawer</TelerikButton>
+    <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
 </p>
 
 <TelerikDrawer Data="@Data"
@@ -59,8 +59,8 @@ If using a [TelerikTooltip](https://demos.telerik.com/blazor-ui/tooltip/overview
     public IEnumerable<DrawerItem> Data { get; set; } =
         new List<DrawerItem>
         {
-            new DrawerItem { Title="Counter Title", Text = "Counter", Icon = IconName.Plus, Url = "counter" },
-            new DrawerItem { Title="FetchData Title", Text = "FetchData", Icon = IconName.GridLayout, Url = "fetchdata" },
+            new DrawerItem { Title="Counter Title", Text = "Counter", Icon = "plus", Url = "counter" },
+            new DrawerItem { Title="FetchData Title", Text = "FetchData", Icon = "grid-layout", Url = "fetchdata" },
          };
 
     public class DrawerItem
diff --git a/knowledge-base/drawer-prevent-collapse.md b/knowledge-base/drawer-prevent-collapse.md
index e537f5d861..ea6d0daa1b 100644
--- a/knowledge-base/drawer-prevent-collapse.md
+++ b/knowledge-base/drawer-prevent-collapse.md
@@ -65,7 +65,7 @@ I would like to prevent the Drawer from collapsing when an item from the navigat
         </div>
     </Template>
     <Content>
-        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu" />
+        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu" />
         <div class="m-5">Content for @SelectedItem?.Text - @SelectedItem?.Description</div>
     </Content>
 </TelerikDrawer>
@@ -76,10 +76,10 @@ I would like to prevent the Drawer from collapsing when an item from the navigat
     public bool DrawerExpanded { get; set; } = true;
     public IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>
     {
-        new DrawerItem {Text = "Shopping Cart", Icon = IconName.Cart, Description = "Items in shopping cart"},
-        new DrawerItem {Text = "Settings", Icon = IconName.Gear, Description = "My profile settings"},
-        new DrawerItem {Text = "Notifications", Icon = IconName.Notification, Description = "My profile notifications"},
-        new DrawerItem {Text = "Calendar", Icon = IconName.Calendar, Description = "My events"},
+        new DrawerItem {Text = "Shopping Cart", Icon = "cart", Description = "Items in shopping cart"},
+        new DrawerItem {Text = "Settings", Icon = "gear", Description = "My profile settings"},
+        new DrawerItem {Text = "Notifications", Icon = "notification", Description = "My profile notifications"},
+        new DrawerItem {Text = "Calendar", Icon = "calendar", Description = "My events"},
     };
 
     private void SelectAndNavigate(DrawerItem item)
diff --git a/knowledge-base/grids-foreign-key.md b/knowledge-base/grids-foreign-key.md
index 939676b9c3..87896316bb 100644
--- a/knowledge-base/grids-foreign-key.md
+++ b/knowledge-base/grids-foreign-key.md
@@ -86,7 +86,7 @@ own data source and return it from a service to render in the corresponding head
                 </TelerikMultiSelect>
                 <TelerikButton ButtonType="ButtonType.Button"
                                Class="k-clear-button-visible ml-2"
-                               Icon="@IconName.Filter"
+                               Icon="filter"
                                Enabled="@( FilteredRoles.Any() )"
                                OnClick="@(async () =>
                                           {
@@ -96,7 +96,7 @@ own data source and return it from a service to render in the corresponding head
                 </TelerikButton>
                 <TelerikButton ButtonType="ButtonType.Button"
                                Class="k-clear-button-visible ml-2"
-                               Icon="@IconName.FilterClear"
+                               Icon="filter-clear"
                                Enabled="@( FilteredRoles.Any() )"
                                OnClick="@(async () =>
                                           {
diff --git a/knowledge-base/textbox-add-icon.md b/knowledge-base/textbox-add-icon.md
index b67cee0a21..92996c432d 100644
--- a/knowledge-base/textbox-add-icon.md
+++ b/knowledge-base/textbox-add-icon.md
@@ -64,7 +64,7 @@ The example below showcases both approaches and here is the outcome from it:
         @* Use the desired icons and styling here, 
             if you use a little more complex markup you could even 
             add event handlers to make this into a button *@
-        <TelerikIcon Icon="@IconName.Zoom" />
+        <TelerikIcon Icon="zoom" />
         <TelerikTextBox @bind-Value="@TheText" />
     </span>
 </label>
@@ -72,7 +72,7 @@ The example below showcases both approaches and here is the outcome from it:
 <br />
 <br />
 <span class="tb-icon-container with-label">
-    <TelerikIcon Icon="@IconName.Zoom" />
+    <TelerikIcon Icon="zoom" />
     <TelerikTextBox @bind-Value="@TheText" Label="some label" />
 </span>
 <style>
diff --git a/knowledge-base/treelist-get-parent-item-on-insert.md b/knowledge-base/treelist-get-parent-item-on-insert.md
index 1c14222758..f00bcaee1e 100644
--- a/knowledge-base/treelist-get-parent-item-on-insert.md
+++ b/knowledge-base/treelist-get-parent-item-on-insert.md
@@ -61,12 +61,12 @@ The approaches to handle this would depend of the type of data the component is
         <TreeListCommandColumn Width="100px">
             <TreeListCommandButton Command="MyAdd" 
                                    OnClick="@( (TreeListCommandEventArgs args) => AddItem(args) )"
-                                   Icon="@IconName.Plus">
+                                   Icon="plus">
                                     Add Child
             </TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit" Icon="edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
         </TreeListCommandColumn>
 
         <TreeListColumn Field="Name" Expandable="true" Width="320px" />
@@ -193,12 +193,12 @@ The approaches to handle this would depend of the type of data the component is
         <TreeListCommandColumn Width="100px">
             <TreeListCommandButton Command="MyAdd"
                                    OnClick="@( (TreeListCommandEventArgs args) => AddItem(args) )"
-                                   Icon="@IconName.Plus">
+                                   Icon="plus">
                                     Add Child
             </TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit" Icon="edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
         </TreeListCommandColumn>
 
         <TreeListColumn Field="Name" Expandable="true" Width="320px" />