diff --git a/common-features/font-icons.md b/common-features/font-icons.md index 52ec81fc65..9222ec62a7 100644 --- a/common-features/font-icons.md +++ b/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 @* *@ @* This would also render the same audio icon *@ - @* home icon from OpenIconic, assuming you have loaded the font on the pag, you can use your own CSS classes and font icon fonts *@ + @* home icon from OpenIconic, assuming you have loaded the font on the page, you can use your own CSS classes and font icon fonts *@ - @* an image by URL, renders an actual tag *@ + @* an image by URL, renders an actual tag *@ ```` >caption The result from the snippet above diff --git a/components/button/icons.md b/components/button/icons.md index 694729e130..77a61df7b9 100644 --- a/components/button/icons.md +++ b/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 Sprite Font Icon -Image URL +Image URL diff --git a/components/drawer/icons.md b/components/drawer/icons.md new file mode 100644 index 0000000000..92f0c225f6 --- /dev/null +++ b/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 `` and as `` + +>caption How to use icons in Telerik Drawer + +````CSHTML +@* This example shows how to add icons to the Drawer items *@ + + + + Toggle drawer +
+ Selected Item: @SelectedItem?.Text +
+ + + +@code { + bool DrawerExpanded { get; set; } = true; + TelerikDrawer DrawerRef { get; set; } + DrawerItem SelectedItem { get; set; } + IEnumerable Data { get; set; } = new List() + { + 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%}) diff --git a/components/drawer/images/drawer-icons.png b/components/drawer/images/drawer-icons.png new file mode 100644 index 0000000000..80a6bf7960 Binary files /dev/null and b/components/drawer/images/drawer-icons.png differ diff --git a/components/menu/icons.md b/components/menu/icons.md new file mode 100644 index 0000000000..a24b0a42a7 --- /dev/null +++ b/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 `` and as `` + +>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 *@ + + + + +@code { + public List MenuData { get; set; } + + protected override void OnInitialized() + { + GenerateMenuData(); + } + + public void GenerateMenuData() + { + MenuData = new List() + { + 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%}) diff --git a/components/menu/images/icons.png b/components/menu/images/icons.png new file mode 100644 index 0000000000..be0a09eb6e Binary files /dev/null and b/components/menu/images/icons.png differ diff --git a/components/treeview/icons.md b/components/treeview/icons.md new file mode 100644 index 0000000000..2dd3a455d8 --- /dev/null +++ b/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 `` and as `` + +>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 *@ + + + + + + + +@code { + public List TreeViewData { get; set; } + + protected override void OnInitialized() + { + GenerateData(); + } + + public void GenerateData() + { + TreeViewData = new List(); + + 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%}) diff --git a/components/treeview/images/icons.png b/components/treeview/images/icons.png new file mode 100644 index 0000000000..7a807ef9a2 Binary files /dev/null and b/components/treeview/images/icons.png differ diff --git a/images/flags.png b/images/flags.png new file mode 100644 index 0000000000..51d8bd74d5 Binary files /dev/null and b/images/flags.png differ