Remove IconName class mentions

_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" />

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

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>

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>

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>

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"))

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"
             }
         };
 

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()
             {

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

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"
                     }
                 }
             }

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"
                     }
                 }

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

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

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

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

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

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