Icon articles docs

common-features/font-icons.md

@@ -34,9 +34,9 @@ You can find the full list of available icons in the [Kendo UI Web Font Icons Li
 
 @* <TelerikIcon Icon="audio" /> *@ @* This would also render the same audio icon *@
 
-<TelerikIcon IconClass="oi oi-home" /> @* home icon from OpenIconic, assuming you have loaded the font on the pag, you can use your own CSS classes and font icon fonts *@
+<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 *@
 
-<TelerikIcon ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png" /> @* an image by URL, renders an actual <img /> tag *@
+<TelerikIcon ImageUrl="https://docs.telerik.com/blazor-ui/images/snowboarding.png" /> @* an image by URL, renders an actual <img /> tag *@
 ````
 
 >caption The result from the snippet above

components/button/icons.md

@@ -28,12 +28,12 @@ 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 ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Image URL</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://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
+        background-image: url("https://docs.telerik.com/blazor-ui/images/flags.png");
         background-position: 0 -64px;
     }
 </style>

components/drawer/icons.md

@@ -0,0 +1,70 @@
+---
+title: Icons
+page_title: Drawer for Blazor | Icon
+description: Icons and images in the Drawer for Blazor
+slug: drawer-icons
+tags: telerik,blazor,drawer,icon,iconclass,image
+published: True
+position: 22
+---
+
+# Drawer Icons
+
+You can put an image, an icon class or a font icon for each item in the Drawer 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%}), point the `IconField` parameter of the component to a `string` field of the model that contains the corresponding icon name.
+
+* for a raster image, point the `ImageUrlField` parameter of the component to a `string` field of the model that contains the url to the icon (relative or absolute).
+
+* for a custom font icon class, point the `IconClassField` parameter of the component to a `string` field of the model that contains 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.
+
+The `IconClassField` and `ImageUrlField` are rendered, respectively, as `<span class="the custom class" />` and as `<img src="the-image-src" />`
+
+>caption How to use icons in Telerik Drawer
+
+````CSHTML
+@* This example shows how to add icons to the Drawer items *@
+
+<TelerikDrawer Data="@Data"
+               IconField="@nameof(DrawerItem.TelerikIcon)"
+               MiniMode="true"
+               @bind-Expanded="@DrawerExpanded"
+               Mode="DrawerMode.Push"
+               @ref="@DrawerRef"
+               @bind-SelectedItem="@SelectedItem">
+    <Content>
+        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu">Toggle drawer</TelerikButton>
+        <div class="m-5">
+            Selected Item: @SelectedItem?.Text
+        </div>
+    </Content>
+</TelerikDrawer>
+
+@code {
+    bool DrawerExpanded { get; set; } = true;
+    TelerikDrawer<DrawerItem> DrawerRef { get; set; }
+    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},
+        };
+
+    public class DrawerItem
+    {
+        public string Text { get; set; }
+        public string TelerikIcon { get; set; }
+    }
+}
+````
+
+>caption The result from the code snippet above
+
+![icons](images/drawer-icons.png)
+
+
+
+## See Also
+
+  * [Drawer Overview]({%slug drawer-overview%})

components/menu/icons.md

@@ -0,0 +1,81 @@
+---
+title: Icons
+page_title: Menu for Blazor | Icon
+description: Icons and images in the Menu for Blazor
+slug: menu-icons
+tags: telerik,blazor,menu,icon,iconclass,image
+published: True
+position: 15
+---
+
+# Menu Icons
+
+You can put an image, icon class or a font icon for each item in the Menu 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%}), point the `IconField` parameter of the component to a string field of the model that contains the corresponding icon name.
+
+* for a raster image, point the `ImageUrlField` parameter of the component to a `string` field of the model that contains the url to the icon (relative or absolute).
+
+* for a custom font icon class, point the `IconClassField` parameter of the component to a `string` field of the model that contains 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.
+
+The `IconClassField` and `ImageUrlField` are rendered, respectively, as `<span class="the custom class" />` and as `<img src="the-image-src" />`
+
+>caption How to use icons in Telerik Menu
+
+````CSHTML
+@* This example shows how to add icons or images to 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>
+
+@code {
+    public List<MenuModel> MenuData { get; set; }
+
+    protected override void OnInitialized()
+    {
+        GenerateMenuData();
+    }
+
+    public void GenerateMenuData()
+    {
+        MenuData = new List<MenuModel>()
+        {
+            new MenuModel()
+            {
+                Text = "IconField",
+                TelerikIcon = IconName.Email
+            },
+            new MenuModel()
+            {
+                Text = "IconClassField",
+                MyIconClass = "oi oi-wrench",
+            },
+            new MenuModel()
+             {
+                Text = "ImageUrlField",
+                MyImage = "https://docs.telerik.com/blazor-ui/images/video.png"
+             }
+        };
+    }
+
+    public class MenuModel
+    {
+        public string Text { get; set; }
+        public string TelerikIcon { get; set; }
+        public string MyImage { get; set; }
+        public string MyIconClass { get; set; }
+    }
+}
+````
+
+>caption The result from the code snippet above
+
+![icons](images/icons.png)
+
+## See Also
+
+  * [Menu Overview]({%slug components/menu/overview%})

components/treeview/icons.md

@@ -0,0 +1,95 @@
+---
+title: Icons
+page_title: TreeView for Blazor | Icon
+description: Icons and images in the TreeView for Blazor
+slug: treeview-icons
+tags: telerik,blazor,treeview,icon,iconclass,image
+published: True
+position: 10
+---
+
+# TreeView Icons
+
+You can put an image, icon class or a font icon for each item in the TreeView 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%}), point the `IconField` parameter of the component to a string field of the model that contains the corresponding icon name.
+
+* for a raster image, point the `ImageUrlField` parameter of the component to a `string` field of the model that contains the url to the icon (relative or absolute).
+
+* for a custom font icon class, point the `IconClassField` parameter of the component to a `string` field of the model that contains 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.
+
+The `IconClassField` and `ImageUrlField` are rendered, respectively, as `<span class="the custom class" />` and as `<img src="the-image-src" />`
+
+>caption How to use icons in Telerik TreeView
+
+````CSHTML
+@* This example shows how to add icons or images to the TreeView items
+Make sure that you also refernce the OpenIconic font that comes with the Blazor App template to see the custom font icon *@
+
+<TelerikTreeView Data="@TreeViewData">
+    <TreeViewBindings>
+        <TreeViewBinding IconClassField="@nameof(TreeViewModel.MyIconClass)"
+                         ImageUrlField="@nameof(TreeViewModel.MyImageUrl)"
+                         IconField="@nameof(TreeViewModel.TelerikIcon)" />
+    </TreeViewBindings>
+</TelerikTreeView>
+
+@code {
+    public List<TreeViewModel> TreeViewData { get; set; }
+
+    protected override void OnInitialized()
+    {
+        GenerateData();
+    }
+
+    public void GenerateData()
+    {
+        TreeViewData = new List<TreeViewModel>();
+
+        TreeViewData.Add(new TreeViewModel()
+        {
+            Id = 1,
+            Text = "Company",
+            ParentId = null,
+            HasChildren = true,
+            TelerikIcon = "home"
+        });
+
+        TreeViewData.Add(new TreeViewModel()
+        {
+            Id = 2,
+            Text = "Contact us",
+            ParentId = 1,
+            HasChildren = false,
+            MyIconClass = "oi oi-envelope-closed"
+        });
+
+        TreeViewData.Add(new TreeViewModel()
+        {
+            Id = 3,
+            Text = "Audio",
+            ParentId = null,
+            MyImageUrl = "https://docs.telerik.com/blazor-ui/images/speaker.png"
+        });
+    }
+
+    public class TreeViewModel
+    {
+        public int Id { get; set; }
+        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; }
+    }
+}
+````
+
+>caption The result from the code snippet above, after expanding the first node
+
+![icons](images/icons.png)
+
+## See Also
+
+  * [TreeView Overview]({%slug components/treeview/overview%})