Remove IconName class mentions (#207)

Author: marin-bratanov

_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

common-features/images/telerik-button-with-icon.png

@@ -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/button/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/buttongroup/icons.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/overview.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/chart/tooltip/shared.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/events.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/icons.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