docs(icons): next chunk

Author: svdimitr

components/button/icons.md

@@ -8,43 +8,17 @@ published: True
 position: 2
 ---
 
-
 # Button Icons
 
-You can put an image, sprite or a font icon in the button to illustrate its purpose for your end users. To apply them, use the following properties:
-
-* for a font icon, use the `Icon` attribute to set the font icon class.
-* for an image, use the `ImageUrl` attribute to provide the URL
-* for a sprite, set the `SpriteClass` attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite.
-
-You can see how to use the built-in icons in the [Font Icons]({%slug  general-information/font-icons%}) article.
-
-For a custom font icon, define the font and glyph in your `Icon` CSS class.
-
-The following example shows how to use an image from a URL, a sprite image, and the built-in font icons.
+You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the Button to illustrate its purpose by using the `Icon` parameter.
 
 >caption How to use icons in Telerik Button
 
 ````CSHTML
-<TelerikButton SpriteClass="k-icon netherlandsFlag">Sprite</TelerikButton>
-<TelerikButton Icon="filter">Font Icon</TelerikButton>
-<TelerikButton ImageUrl="https://docs.telerik.com/blazor-ui/images/snowboarding.png">Image URL</TelerikButton>
-
-<style>
-    /* the sprite for the first button is defined through a CSS rule matchin its Class */
-    .netherlandsFlag {
-        background-image: url("https://docs.telerik.com/blazor-ui/images/flags.png");
-        background-position: 0 -64px;
-    }
-</style>
+<TelerikButton Icon="@FontIcon.Filter">Font Icon</TelerikButton>
+<TelerikButton Icon="@SvgIcon.Export">SVG Icon</TelerikButton>
 ````
 
->caption The result from the code snippet above
-
-![Blazor Icon Buttons](images/icon-buttons.png)
-
->tip You can use relative paths to your images in the `wwwroot` folder. The example above uses absolute paths to make it easy for you to see the results without preparing images.
-
 >tip If you don't add text to the button, the button will center the icon on all sides.
 
 >note Images used as icons should generally be small enough to fit in a line of text - the button is an inline element and is not designed for large images. If you want to use big icon buttons, consider one of the following options:

components/buttongroup/icons.md

@@ -11,18 +11,7 @@ position: 15
 
 # ButtonGroup Icons
 
-You can put an image, sprite or a font icon in the buttons within a ButtonGroup to illustrate its purpose for your end users. To apply them, use the following properties:
-
-* for a [Telerik font icon]({%slug general-information/font-icons%}), use the `Icon` attribute to set the font icon class.
-
-* for a raster image, use the `ImageUrl` attribute to provide the URL to the icon (relative or absolute).
-
-* for a custom font icon class, set the `IconClass` parameter of the component to the desired CSS class list which provides the required rules (like font name and glyph symbol). Make sure to also reference the desired font in your app and to use its own recommendations.
-
-* for a sprite, set the `SpriteClass` attribute to `k-icon MySpriteClass` where `MySpriteClass` defines the CSS rules for the sprite.
-
-
-The following example shows how to use an image from a URL, a sprite image, and the built-in font icons.
+You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the ButtonGroup items to illustrate its purpose by using the `Icon` parameter.
 
 >caption How to use icons in the Telerik ButtonGroup Button
 
@@ -31,43 +20,14 @@ The following example shows how to use an image from a URL, a sprite image, and
 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 ? "volume-off" : "volume-up" )" @bind-Selected="@FontSelected">Font Icon</ButtonGroupToggleButton>
-
-    <ButtonGroupToggleButton ImageUrl="@RasterIconUrl" @bind-Selected="@RasterSelected">Image URL</ButtonGroupToggleButton>
+    <ButtonGroupToggleButton Icon="@( FontSelected ? FontIcon.VolumeUp : SvgIcon.VolumeDown )" @bind-Selected="@FontSelected">Font Icon</ButtonGroupToggleButton>
 </TelerikButtonGroup>
 
-<style>
-    /* the sprite for the first button is defined through a CSS rule matchin its Class */
-    .flag {
-        background-image: url("https://docs.telerik.com/blazor-ui/images/flags.png");
-    }
-
-        .flag.netherlands {
-            background-position: 0 -64px;
-            background-color: white;
-        }
-
-        .flag.brazil {
-            background-position: 0 0;
-        }
-</style>
-
 @code{
-    bool FlagSelected { get; set; }
     bool FontSelected { get; set; }
-    bool RasterSelected { get; set; }
-    string RasterIconUrl => RasterSelected ? "https://docs.telerik.com/blazor-ui/images/snowboarding.png" : "https://docs.telerik.com/blazor-ui/images/swimming.png";
 }
 ````
 
->caption The result from the code snippet above
-
-![Icons in ButtonGroup Buttons](images/buttongroup-icons.png)
-
->tip You can use relative paths to your images in the `wwwroot` folder. The example above uses absolute paths to make it easy for you to see the results without preparing images.
-
 >tip If you don't add text to the button, the button will center the icon on all sides.
 
 >note Images used as icons should generally be small enough to fit in a line of text - the button is an inline element and is not designed for large images. If you want to use big icon buttons, consider one of the following options:

components/contextmenu/data-binding/overview.md

@@ -38,7 +38,7 @@ The menu items provide the following features that you control through the corre
 
 * `Text` - the text that will be shown on the item.
 
-* `Icon` - The [Telerik Font or SVG icon]({%slug general-information/font-icons%}) that will be rendered in the item. Read more in the [Icons article]({%slug breadcrumb-icons%}).
+* `Icon` - The [Telerik Font or SVG icon]({%slug general-information/font-icons%}) that will be rendered in the item. Read more in the [Icons article]({%slug contextmenu-icons%}).
 
 * `Url` - the view the item will navigate to by generating a link.
 
@@ -53,9 +53,7 @@ The properties of a menu item match directly to a field of the model the menu is
 * IdField => Id
 * ParentIdField => ParentId
 * TextField => Text
-* IconClassField => IconClass
 * IconField => Icon
-* ImageUrlField => ImageUrl
 * UrlField => Url
 * HasChildrenField => HasChildren
 * ItemsField => Items
@@ -75,7 +73,7 @@ public class ContextMenuItem
 	public string Text { get; set; }
 	public int? ParentId { get; set; }
 	public bool HasChildren { get; set; }
-	public string Icon { get; set; }
+	public FontIcon? Icon { get; set; }
 	public string Url { get; set; }
 	public bool Disabled { get; set; }
 	public bool Separator { get; set; }

components/contextmenu/refresh-data.md

@@ -41,9 +41,7 @@ In this article:
 
 <TelerikContextMenu Data="@MenuData"
                     Selector="#context-menu-target"
-                    IconField="@nameof(MenuModel.TelerikIcon)"
-                    ImageUrlField="@nameof(MenuModel.MyImage)"
-                    IconClassField="@nameof(MenuModel.MyIconClass)">
+                    IconField="@nameof(MenuModel.TelerikFontIcon)">
 </TelerikContextMenu>
 
 @code {
@@ -53,10 +51,10 @@ In this article:
     {
         MenuData.Add(
             new MenuModel()
-            {
-                Text = "Info",
-                TelerikIcon = "info-circle"
-            });
+                {
+                    Text = "Info",
+                    TelerikFontIcon = FontIcon.InfoCircle
+                });
         MenuData = new List<MenuModel>(MenuData);
     }
 
@@ -76,12 +74,12 @@ In this article:
             new MenuModel()
             {
                 Text = "Copy",
-                TelerikIcon = "copy"
+                TelerikFontIcon = FontIcon.Copy
             },
             new MenuModel()
             {
                 Text = "Cut",
-                TelerikIcon = "cut"
+                TelerikFontIcon = FontIcon.Cut
             }
         };
         MenuData = new List<MenuModel>(MenuData);
@@ -94,27 +92,25 @@ In this article:
             new MenuModel()
             {
                 Text = "IconField",
-                TelerikIcon = "email"
+                TelerikFontIcon = FontIcon.Envelop
             },
             new MenuModel()
             {
-                Text = "IconClassField",
-                MyIconClass = "oi oi-wrench",
+                Text = "Wrench Icon,
+                TelerikFontIcon = FontIcon.Wrench,
             },
             new MenuModel()
              {
-                Text = "ImageUrlField",
-                MyImage = "https://docs.telerik.com/blazor-ui/images/video.png"
+                Text = "File Video Icon",
+                TelerikFontIcon = FontIcon.FileVideo
              }
         };
     }
 
     public class MenuModel
     {
         public string Text { get; set; }
-        public string TelerikIcon { get; set; }
-        public string MyImage { get; set; }
-        public string MyIconClass { get; set; }
+        public FontIcon? TelerikFontIcon { get; set; }
     }
 }
 ````

components/gridlayout/items.md

@@ -259,7 +259,7 @@ You can use the exposed parameters of the GridLayout items to create more comple
     <GridLayoutItems>
         <GridLayoutItem Column="1" Row="1" ColumnSpan="3">
             <span>
-                <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
+                <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@("menu")">Toggle drawer</TelerikButton>
             </span>
         </GridLayoutItem>
         <GridLayoutItem Column="1" Row="2">
@@ -269,6 +269,7 @@ You can use the exposed parameters of the GridLayout items to create more comple
                                MiniMode="true"
                                Mode="DrawerMode.Push"
                                @ref="@DrawerRef"
+                               IconField="@nameof(DrawerItem.TelerikFontIcon)"
                                @bind-SelectedItem="@SelectedItem">
                 </TelerikDrawer>
             </div>
@@ -292,9 +293,7 @@ You can use the exposed parameters of the GridLayout items to create more comple
         <GridLayoutItem Column="3" Row="2">
             <TelerikTreeView Data="@TreeViewData">
                 <TreeViewBindings>
-                    <TreeViewBinding IconClassField="@nameof(TreeViewModel.MyIconClass)"
-                                     ImageUrlField="@nameof(TreeViewModel.MyImageUrl)"
-                                     IconField="@nameof(TreeViewModel.TelerikIcon)" />
+                    <TreeViewBinding IconField="@nameof(TreeViewModel.TelerikFontIcon)" />
                 </TreeViewBindings>
             </TelerikTreeView>
         </GridLayoutItem>
@@ -320,30 +319,30 @@ You can use the exposed parameters of the GridLayout items to create more comple
         TreeViewData = new List<TreeViewModel>();
 
         TreeViewData.Add(new TreeViewModel()
-        {
-            Id = 1,
-            Text = "Company",
-            ParentId = null,
-            HasChildren = true,
-            TelerikIcon = "home"
-        });
+            {
+                Id = 1,
+                Text = "Company",
+                ParentId = null,
+                HasChildren = true,
+                TelerikFontIcon = FontIcon.Home
+            });
 
         TreeViewData.Add(new TreeViewModel()
-        {
-            Id = 2,
-            Text = "Contact us",
-            ParentId = 1,
-            HasChildren = false,
-            MyIconClass = "oi oi-envelope-closed"
-        });
+            {
+                Id = 2,
+                Text = "Contact us",
+                ParentId = 1,
+                HasChildren = false,
+                TelerikFontIcon = FontIcon.Envelop
+            });
 
         TreeViewData.Add(new TreeViewModel()
-        {
-            Id = 3,
-            Text = "Audio",
-            ParentId = null,
-            MyImageUrl = "https://docs.telerik.com/blazor-ui/images/speaker.png"
-        });
+            {
+                Id = 3,
+                Text = "Audio",
+                ParentId = null,
+                TelerikFontIcon = FontIcon.FileAudio
+            });
     }
 
     public class TreeViewModel
@@ -352,18 +351,16 @@ You can use the exposed parameters of the GridLayout items to create more comple
         public string Text { get; set; }
         public bool HasChildren { get; set; }
         public int? ParentId { get; set; }
-        public string TelerikIcon { get; set; }
-        public string MyIconClass { get; set; }
-        public string MyImageUrl { get; set; }
+        public FontIcon? TelerikFontIcon { get; set; }
     }
 
     public IEnumerable<SampleData> GridData = Enumerable.Range(1, 30).Select(x => new SampleData
-    {
-        Id = x,
-        Name = "name " + x,
-        Team = "team " + x % 5,
-        HireDate = DateTime.Now.AddDays(-x).Date
-    });
+        {
+            Id = x,
+            Name = "name " + x,
+            Team = "team " + x % 5,
+            HireDate = DateTime.Now.AddDays(-x).Date
+        });
 
     public class SampleData
     {
@@ -377,15 +374,15 @@ You can use the exposed parameters of the GridLayout items to create more comple
     DrawerItem SelectedItem { get; set; }
     IEnumerable<DrawerItem> DrawerData { get; set; } =
         new List<DrawerItem>
-        {
-            new DrawerItem { Text = "Counter", Icon = "plus"},
-            new DrawerItem { Text = "FetchData", Icon = "grid-layout"},
-            };
+                {
+            new DrawerItem { Text = "Counter", TelerikFontIcon = FontIcon.Plus },
+            new DrawerItem { Text = "FetchData", TelerikFontIcon = FontIcon.GridLayout },
+                    };
 
     public class DrawerItem
     {
         public string Text { get; set; }
-        public string Icon { get; set; }
+        public FontIcon TelerikFontIcon { get; set; }
     }
 }
 ````