From 4f77644dedda0715b3958b13a11a58b7ff97f135 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 7 Aug 2024 16:45:48 +0300 Subject: [PATCH 1/6] docs(icons): Improve custom icons documentation --- common-features/icons.md | 107 ++++++++++++++++++++++++--------------- 1 file changed, 65 insertions(+), 42 deletions(-) diff --git a/common-features/icons.md b/common-features/icons.md index 588862a90f..a560d02a85 100644 --- a/common-features/icons.md +++ b/common-features/icons.md @@ -31,6 +31,7 @@ This article contains the following sections: * [Use custom SVG icon collection](#use-custom-svg-icon-collection) * [Set global icon type for the whole application](#set-global-icon-type) * [Complete list of built-in icons](#icons-list) +* [How to use custom icons](#custom-icon-support) ## How Icons Work @@ -104,38 +105,43 @@ The `TelerikFontIcon` component can show a [built-in Telerik Blazor font icon](# | `Flip` | `IconFlip` `enum`
(`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`
(`"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. | +| `Size` | `string`
(`"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](/blazor-ui/api/telerik.blazor.themeconstants.fonticon.size). | +| `ThemeColor` | `string` | Any of the predefined icon colors. Use the static [`ThemeConstants.FontIcon.ThemeColor` class](/blazor-ui/api/telerik.blazor.themeconstants.fonticon.themecolor) properties. By default, the icon color will inherit the current CSS text color. | >caption Using TelerikFontIcon ````CSHTML - - - - - - - - - - - +

+ Font icon with default settings: + +

+ +

+ Large flipped font icon: + +

+ +

+ Font icon that inherits its color: + +

+ +

+ Font icon with ThemeColor: + +

+ +

+ Custom (Font Awesome) font icon: + + Button with Custom Font Icon + + + +

@[template](/_contentTemplates/common/icons.md#font-icons-css-code) ```` @@ -188,15 +194,15 @@ is the same as ## SvgIcon Component -The `TelerikSvgIcon` component can show a [built-in Telerik Blazor SVG icon](#icons-list) or a custom SVG icon. Here are the available configuration parameters: +The `TelerikSvgIcon` component can show a [built-in Telerik Blazor SVG icon](#icons-list) or a [custom SVG icon](#use-custom-svg-icon-collection). Here are the available configuration parameters: | Parameter | Type and Default Value | Description | |---|---|---| | `Flip` | `IconFlip` `enum`
(`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`
(`"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. | +| `Size` | `string`
(`"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](/blazor-ui/api/telerik.blazor.themeconstants.svgicon.size). | | `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.SvgIcon.ThemeColor` class properties. | +| `ThemeColor` | `string` | Any of the predefined icon colors. Use the static [`ThemeConstants.SvgIcon.ThemeColor` class](/blazor-ui/api/telerik.blazor.themeconstants.svgicon.themecolor) properties. | >caption Using TelerikSvgIcon @@ -242,11 +248,15 @@ The `ISvgIcon` interface members are: >caption Define custom SVG icon collection ````CSHTML -Moon: - +

+ Moon: + -Circles: - + Circles: + +

+ +Button with Custom SVG Icon @code { public class Moon : SvgIconBase @@ -284,22 +294,23 @@ Circles: It is possible to configure the icon type for the whole application: 1. Locate the [``]({%slug rootcomponent-overview%}) tag in the Blazor app. Normally, it's in a layout file such as `MainLayout.razor` or `TelerikLayout.razor`. -2. Set the `TelerikRootComponent` `IconType` parameter to an `IconType` enum value - `Svg` or `Font`. - ->tip The default icon type is `Svg`. - -> The global `IconType` setting does not affect `` and `` instances in the app. It will toggle the icon type of all other components, such as Button, Grid, etc. +2. Set the RootComponent `IconType` parameter to an [`IconType` enum](/blazor-ui/api/telerik.blazor.icontype) value (`Svg` or `Font`). The default icon type is `Svg`. >caption Define global icon type via TelerikRootComponent
````HTML - + @Body ```` +> The global `IconType` setting only affects built-in icons that the Telerik components render automatically and the developer cannot change. For example, these are the sort and filter icons in the Grid header cells, or the open arrow in the DropDownList. The `IconType` parameter does not affect: +> +> * `` and `` instances in the app. +> * Icons in Buttons, Menu items, and other navigation components. Such icons are provided by the app and depend on `Icon` or `IconField` parameters. + ## Icons List @@ -317,7 +328,19 @@ Each icon box in the icon list is clickable and reveals the following details: The icon list may contain icons which are not available in older versions of Telerik UI for Blazor or even in the latest one. Such icons will be added in the next product version. +## Custom Icon Support + +Telerik UI for Blazor supports using custom (third-party) icons: + +* [In the `SvgIcon` component](#use-custom-svg-icon-collection). +* [In the `FontIcon` component](#fonticon-component). +* In [Buttons]({%slug button-icons%}), [Menu items]({%slug menu-icons%}), [Drawer items]({%slug drawer-icons%}) and other [navigation components]({%slug blazor-overview%}#list-of-components). + +[Using custom icons for the automatically rendered icons is not supported yet](https://feedback.telerik.com/blazor/1641361-ability-to-change-the-built-in-icons). For example, these are the sort and filter icons in the Grid header cells, or the open arrow in the DropDownList. + + ## See Also +* [Built-in Icon List](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/) * [Blazor Live Demos](https://demos.telerik.com/blazor-ui/) -* [Kendo UI Web Font Icons Library](https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web) +* [CSS Themes]({%slug themes-built-in%}) From 4b7ed0b028db8f80ba84a8899acacd83d0453bb7 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 9 Aug 2024 14:09:40 +0300 Subject: [PATCH 2/6] Update common-features/icons.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- common-features/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-features/icons.md b/common-features/icons.md index a560d02a85..ce4ad9a6b3 100644 --- a/common-features/icons.md +++ b/common-features/icons.md @@ -105,7 +105,7 @@ The `TelerikFontIcon` component can show a [built-in Telerik Blazor font icon](# | `Flip` | `IconFlip` `enum`
(`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`
(`"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](/blazor-ui/api/telerik.blazor.themeconstants.fonticon.size). | +| `Size` | `string`
(`"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, the recommended practice is to use the properties of the static [`ThemeConstants.FontIcon.Size` class](/blazor-ui/api/telerik.blazor.themeconstants.fonticon.size). | | `ThemeColor` | `string` | Any of the predefined icon colors. Use the static [`ThemeConstants.FontIcon.ThemeColor` class](/blazor-ui/api/telerik.blazor.themeconstants.fonticon.themecolor) properties. By default, the icon color will inherit the current CSS text color. | >caption Using TelerikFontIcon From 9baabc38857abcc575ac0fc7ddf07afbb8c9003e Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 9 Aug 2024 14:09:48 +0300 Subject: [PATCH 3/6] Update common-features/icons.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- common-features/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-features/icons.md b/common-features/icons.md index ce4ad9a6b3..87315c8098 100644 --- a/common-features/icons.md +++ b/common-features/icons.md @@ -200,7 +200,7 @@ The `TelerikSvgIcon` component can show a [built-in Telerik Blazor SVG icon](#ic |---|---|---| | `Flip` | `IconFlip` `enum`
(`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`
(`"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](/blazor-ui/api/telerik.blazor.themeconstants.svgicon.size). | +| `Size` | `string`
(`"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, the recommended practice is to use the properties of the static [`ThemeConstants.SvgIcon.Size` class](/blazor-ui/api/telerik.blazor.themeconstants.svgicon.size). | | `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.SvgIcon.ThemeColor` class](/blazor-ui/api/telerik.blazor.themeconstants.svgicon.themecolor) properties. | From 83ff32539e737e9e38d3213551bee59d63d63c19 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 9 Aug 2024 14:10:13 +0300 Subject: [PATCH 4/6] Update common-features/icons.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- common-features/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-features/icons.md b/common-features/icons.md index 87315c8098..9a33adcadf 100644 --- a/common-features/icons.md +++ b/common-features/icons.md @@ -306,7 +306,7 @@ It is possible to configure the icon type for the whole application: ```` -> The global `IconType` setting only affects built-in icons that the Telerik components render automatically and the developer cannot change. For example, these are the sort and filter icons in the Grid header cells, or the open arrow in the DropDownList. The `IconType` parameter does not affect: +> The global `IconType` setting only affects built-in icons that the Telerik components render automatically and the developer cannot change. For example,the sort and filter icons in the Grid header cells, or the open arrow in the DropDownList. The `IconType` parameter does not affect: > > * `` and `` instances in the app. > * Icons in Buttons, Menu items, and other navigation components. Such icons are provided by the app and depend on `Icon` or `IconField` parameters. From 90e95ffbdf9097b3b44726afa8d519fd46df1ad4 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 9 Aug 2024 14:10:23 +0300 Subject: [PATCH 5/6] Update common-features/icons.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- common-features/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-features/icons.md b/common-features/icons.md index 9a33adcadf..87419c3310 100644 --- a/common-features/icons.md +++ b/common-features/icons.md @@ -309,7 +309,7 @@ It is possible to configure the icon type for the whole application: > The global `IconType` setting only affects built-in icons that the Telerik components render automatically and the developer cannot change. For example,the sort and filter icons in the Grid header cells, or the open arrow in the DropDownList. The `IconType` parameter does not affect: > > * `` and `` instances in the app. -> * Icons in Buttons, Menu items, and other navigation components. Such icons are provided by the app and depend on `Icon` or `IconField` parameters. +> * Icons in Buttons, Menu items, and other navigation components. Such icons are provided by the app and depend on the `Icon` or `IconField` parameters. ## Icons List From 6edb54bf312557de53ac2b15bebce54136b4a5a4 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 9 Aug 2024 14:10:31 +0300 Subject: [PATCH 6/6] Update common-features/icons.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- common-features/icons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-features/icons.md b/common-features/icons.md index 87419c3310..ba398044b9 100644 --- a/common-features/icons.md +++ b/common-features/icons.md @@ -336,7 +336,7 @@ Telerik UI for Blazor supports using custom (third-party) icons: * [In the `FontIcon` component](#fonticon-component). * In [Buttons]({%slug button-icons%}), [Menu items]({%slug menu-icons%}), [Drawer items]({%slug drawer-icons%}) and other [navigation components]({%slug blazor-overview%}#list-of-components). -[Using custom icons for the automatically rendered icons is not supported yet](https://feedback.telerik.com/blazor/1641361-ability-to-change-the-built-in-icons). For example, these are the sort and filter icons in the Grid header cells, or the open arrow in the DropDownList. +[Using custom icons for the automatically rendered icons is not supported yet](https://feedback.telerik.com/blazor/1641361-ability-to-change-the-built-in-icons). For example, the sort and filter icons in the Grid header cells, or the open arrow in the DropDownList. ## See Also