Merge icon-additions-1293 into production

common-features/icons.md

@@ -71,17 +71,26 @@ The `TelerikFontIcon` component can show a [built-in Telerik Blazor font icon](#
 | `Flip` | `IconFlip` `enum` <br /> (`None`) | The icon's flip direction, which allows to mirror (turn over) the image horizontally, vertically, or in both directions. |
 | `Icon` | `FontIcon` `enum` | Any of the [built-in Telerik Blazor font icons](#icons-list). This parameter takes precedence over `IconClass`, if both are set. |
 | `IconClass` | `string` | Custom CSS class for a custom third-party icon. Do not use together with the `Icon` parameter. |
-| `Size` | `string` <br /> (`"md"`) | Any of the predefined icon sizes (from `"xs"` to `"xxxl"`). It is possible to set the parameter value to raw strings such as `"lg"`, `"md"` or `"sm"`. However, we recommend using the properties of the static `ThemeConstants.Icon.Size` class. |
-| `ThemeColor` | `string` | Any of the predefined icon colors. Use the static `ThemeConstants.Icon.ThemeColor` class properties. By default, the icon color will inherit the current CSS text color. |
+| `Size` | `string` <br /> (`"md"`) | Any of the predefined icon sizes (from `"xs"` to `"xxxl"`). It is possible to set the parameter value to raw strings such as `"lg"`, `"md"` or `"sm"`. However, we recommend using the properties of the static `ThemeConstants.FontIcon.Size` class. |
+| `ThemeColor` | `string` | Any of the predefined icon colors. Use the static `ThemeConstants.FontIcon.ThemeColor` class properties. By default, the icon color will inherit the current CSS text color. |
 
 >caption Using TelerikFontIcon
 
 ````CSHTML
-<TelerikFontIcon Icon="@FontIcon.Audio" />
+<TelerikFontIcon Icon="@FontIcon.FileAudio" />
 
 <span style="color: red;">
     <TelerikFontIcon Icon="@FontIcon.Save" Size="lg" Flip="@IconFlip.Vertical" />
 </span>
+
+<TelerikFontIcon IconClass="my-custom-icon" />
+
+<style>
+    .my-custom-icon {
+        /* define a background image or a custom font icon here */
+        background: purple;
+    }
+</style>
 ````
 
 ### Set Custom Font Icon Size
@@ -100,10 +109,10 @@ Our font icons are designed on a 16px grid base. For better display quality, use
 </style>
 
 <div class="large-icons">
-    <TelerikIcon Icon="@FontIcon.Filter"></TelerikIcon>
+    <TelerikFontIcon Icon="@FontIcon.Filter"></TelerikFontIcon>
 </div>
 
-<TelerikIcon Icon="@FontIcon.Filter"></TelerikIcon>
+<TelerikFontIcon Icon="@FontIcon.Filter"></TelerikFontIcon>
 ````
 
 ### Render Font Icons with HTML
@@ -133,18 +142,18 @@ The `TelerikSvgIcon` component can show a [built-in Telerik Blazor SVG icon](#ic
 |---|---|---|
 | `Flip` | `IconFlip` `enum` <br /> (`None`) | The icon's flip direction, which allows to mirror (turn over) the image horizontally, vertically, or in both directions. |
 | `Icon` | `ISvgIcon` | Assign a property of the `SvgIcon` static class to use any of the [built-in Telerik Blazor font icons](#icons-list). Alternatively, [implement your own custom SVG Icon class](#implement-custom-svg-icon-classes). |
-| `Size` | `string` <br /> (`"md"`) | Any of the predefined icon sizes (from `"xs"` to `"xxxl"`). It is possible to set the parameter value to raw strings such as `"lg"`, `"md"` or `"sm"`. However, we recommend using the properties of the static `ThemeConstants.Icon.Size` class. |
+| `Size` | `string` <br /> (`"md"`) | Any of the predefined icon sizes (from `"xs"` to `"xxxl"`). It is possible to set the parameter value to raw strings such as `"lg"`, `"md"` or `"sm"`. However, we recommend using the properties of the static `ThemeConstants.SvgIcon.Size` class. |
 | `ChildContent` | `RenderFragment` | The HTML markup of a custom SVG icon. Do not use together with `Icon`. |
-| `ThemeColor` | `string` | Any of the predefined icon colors. Use the static `ThemeConstants.Icon.ThemeColor` class properties. |
+| `ThemeColor` | `string` | Any of the predefined icon colors. Use the static `ThemeConstants.SvgIcon.ThemeColor` class properties. |
 
 >caption Using TelerikSvgIcon
 
 ````CSHTML
 <TelerikSvgIcon Icon="@SvgIcon.Calendar" />
 
-<TelerikSvgIcon Icon="@SvgIcon.Audio"
-                Size="@ThemeConstants.Icon.Size.Large"
-                ThemeColor="@ThemeConstants.Icon.ThemeColor.Primary" />
+<TelerikSvgIcon Icon="@SvgIcon.FileAudio"
+                Size="@ThemeConstants.SvgIcon.Size.Large"
+                ThemeColor="@ThemeConstants.SvgIcon.ThemeColor.Primary" />
 ````
 
 ### Render Custom SVG Icons with HTML

components/button/icons.md

@@ -12,22 +12,37 @@ position: 2
 
 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.
 
+The `Icon` parameter type is `object` and it accepts:
+
+* a member of the `FontIcon` enum
+* a property of the static `SvgIcon` class
+* a `string` that is a CSS class for a custom icon
+
 >caption How to use icons in Telerik Button
 
 ````CSHTML
 <TelerikButton Icon="@FontIcon.Filter">Font Icon</TelerikButton>
+
 <TelerikButton Icon="@SvgIcon.Export">SVG Icon</TelerikButton>
+
+<TelerikButton Icon="@( "my-icon" )">Custom Icon</TelerikButton>
+
+<style>
+    .my-icon {
+        /* define a background image or a custom font icon here */
+        background: purple;
+    }
+</style>
 ````
 
 >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:
+>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:
 >
-> * defining a `Class` on the button that provides `height` and `width`. The width and height can be set in `px` sufficient to accommodate the icon or to `auto`,
-> * or attaching an `@onclick` handler to an icon/`span`/`img` element instead of using a button,
-> * or adding your own HTML inside the button, something like: `<TelerikButton><img style="width: 400px; height: 400px;" src="my-icon.svg" />some text</TelerikButton>`
-
+> * Define a `Class` on the button that provides `height` and `width`. The width and height can be set in `px` sufficient to accommodate the icon or to `auto`,
+> * Attach an `@onclick` handler to an icon/`span`/`img` element instead of using a button,
+> * Adding your own HTML inside the button, something like: `<TelerikButton><img style="width: 400px; height: 400px;" src="my-icon.svg" />some text</TelerikButton>`
 
 ## See Also
 
-  * [Button Overview]({%slug components/button/overview%})
+* [Button Overview]({%slug components/button/overview%})

components/drawer/icons.md

@@ -12,51 +12,55 @@ position: 22
 
 You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the Drawer item by assigning an `object` to the `IconField` parameter.
 
->caption How to use icons in Telerik Drawer
+If the icon property name in the Drawer model is `Icon`, there is no need to set the `IconField` parameter.
 
-````CSHTML
-@* This example shows how to add icons to the Drawer items *@
+>caption How to use icons in the Telerik Drawer
 
+````CSHTML
 <TelerikDrawer Data="@Data"
-               IconField="@nameof(DrawerItem.TelerikIcon)"
+               IconField="@nameof(DrawerItem.Icon)"
                MiniMode="true"
                @bind-Expanded="@DrawerExpanded"
                Mode="DrawerMode.Push"
                @ref="@DrawerRef"
                @bind-SelectedItem="@SelectedItem">
     <DrawerContent>
-        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@("menu")">Toggle drawer</TelerikButton>
+        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@FontIcon.Menu">Toggle drawer</TelerikButton>
         <div class="m-5">
             Selected Item: @SelectedItem?.Text
         </div>
     </DrawerContent>
 </TelerikDrawer>
 
+<style>
+    .my-icon {
+        /* define a background image or a custom font icon here */
+        background: purple;
+    }
+</style>
+
 @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 = FontIcon.Pin},
-                new DrawerItem { Text = "Navigation", TelerikIcon = FontIcon.Globe},
-                new DrawerItem { Text = "Favourite Locations", TelerikIcon = FontIcon.Star},
-        };
+    private TelerikDrawer<DrawerItem> DrawerRef { get; set; }
+
+    private bool DrawerExpanded { get; set; } = true;
+
+    private DrawerItem SelectedItem { get; set; }
+
+    private IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>()
+    {
+        new DrawerItem { Text = "Current Location", Icon = FontIcon.Pin },
+        new DrawerItem { Text = "Navigation", Icon = FontIcon.Globe },
+        new DrawerItem { Text = "Favorites", Icon = "my-icon" },
+    };
 
     public class DrawerItem
     {
         public string Text { get; set; }
-        public FontIcon? TelerikIcon { get; set; }
+        public object Icon { get; set; }
     }
 }
 ````
 
->caption The result from the code snippet above
-
-![icons](images/drawer-icons.png)
-
-
-
 ## See Also
 
-  * [Drawer Overview]({%slug drawer-overview%})
+* [Drawer Overview]({%slug drawer-overview%})

components/grid/columns/command.md

@@ -32,6 +32,7 @@ The section describes the available features and their use.
 The `GridCommandButton` tag offers the following features:
 
 * `Command` - the command that will be invoked. Can be one of the built-in commands (see below), or a custom command name.
+* `Icon` - the command button icon, which can be a font icon, an SVG icon or a custom icon. Use in the same way as the [Button component `Icon`]({%slug button-icons%}).
 * `OnClick` - the event handler that the button will fire. If used on a built-in command, this handler will fire before the [corresponding CRUD event]({%slug components/grid/editing/overview%}). Cancelling it will prevent the built-in CRUD event from firing.
 * `ShowInEdit` - a boolean property indicating whether the button is only visible while the user is editing/inserting data.
 * `ChildContent` - the text the button will render. You can also place it between the command button's opening and closing tags.

components/menu/icons.md

@@ -10,53 +10,57 @@ position: 15
 
 # Menu Icons
 
-You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the Menu item to illustrate its purpose by using the `IconField` parameter.
+You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the Menu item to illustrate its purpose by using the `IconField` parameter. The Menu also supports custom icons.
 
->caption How to use icons in Telerik Menu
+If the icon property in the Menu model is called `Icon`, there is no need to set the `IconField` parameter.
+
+>caption How to use icons in the Telerik Menu
 
 ````CSHTML
 <TelerikMenu Data="@MenuData"
-             IconField="@nameof(MenuModel.TelerikFontIcon)">
+             IconField="@(nameof(MenuItem.Icon))">
 </TelerikMenu>
 
+<style>
+    .my-icon {
+        /* define a background image or a custom font icon here */
+        background: purple;
+    }
+</style>
+
 @code {
-    public List<MenuModel> MenuData { get; set; }
+    public List<MenuItem> MenuData { get; set; }
 
     protected override void OnInitialized()
     {
-        GenerateMenuData();
-    }
-
-    public void GenerateMenuData()
-    {
-        MenuData = new List<MenuModel>()
+        MenuData = new List<MenuItem>()
         {
-            new MenuModel()
+            new MenuItem()
             {
-                Text = "Mail Icon",
-                TelerikFontIcon = FontIcon.Envelop
+                Text = "Font Icon",
+                Icon = FontIcon.Envelop
             },
-            new MenuModel()
+            new MenuItem()
             {
-                Text = "Wrench Icon",
-                TelerikFontIcon = FontIcon.Wrench,
+                Text = "SVG Icon",
+                Icon = SvgIcon.Wrench,
             },
-            new MenuModel()
+            new MenuItem()
              {
-                Text = "Video Icon",
-                TelerikFontIcon = FontIcon.FileVideo
+                Text = "Custom Icon",
+                Icon = "my-icon"
              }
         };
     }
 
-    public class MenuModel
+    public class MenuItem
     {
         public string Text { get; set; }
-        public FontIcon? TelerikFontIcon { get; set; }
+        public object Icon { get; set; }
     }
 }
 ````
 
 ## See Also
 
-  * [Menu Overview]({%slug components/menu/overview%})
+* [Menu Overview]({%slug components/menu/overview%})