You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: common-features/icons.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,25 +1,25 @@
1
1
---
2
2
title: Icons
3
3
page_title: Font and SVG Icons
4
-
description: Blazor Icons consists of customizable, scalable icons for Blazor apps that enhance UI design with easy styling.
4
+
description: Blazor Icons are customizable, scalable icons for Blazor apps that enhance UI design with easy styling.
5
5
slug: common-features-icons
6
6
tags: telerik,blazor,icon,font,built-in
7
7
published: True
8
8
previous_url: /common-features/font-icons
9
9
position: 1
10
10
---
11
11
12
-
# Blazor Icons
12
+
# Blazor SVG and Font Icons
13
13
14
-
Telerik UI for Blazor provides a large set of built-in icons. There are two ways to consume and render them: as font icons or as SVG icons. It is also possible to use custom blazor icons, or define an application-wide setting, which affects the type of icons in all Telerik Blazor components.
14
+
Telerik UI for Blazor provides a large set of built-in icons. There are two ways to consume and render them: as font icons or as SVG icons. It is also possible to use custom Blazor icons, or define an application-wide setting, which affects the type of icons in all Telerik Blazor components.
15
15
16
16
The Telerik Blazor components generate the same type of icons (font icons or SVG icons), [depending on the `TelerikRootComponent` configuration](#set-global-icon-type). However, Telerik UI for Blazor includes standalone [`FontIcon`](#fonticon-component) and [`SvgIcon`](#svgicon-component) components, which can be used at the same time.
17
17
18
18
In general, font icons produce a smaller HTML footprint and the glyph can be overridden with CSS. SVG icons provide better accessibility and can use multiple colors in a single icon.
*[Set global icon type for the whole application](#set-global-icon-type)
32
+
*[Set global icon type for the whole application](#set-global-blazor-icon-type)
33
33
*[Complete list of built-in icons](#icons-list)
34
-
*[How to use custom icons](#custom-icon-support)
34
+
*[How to use custom icons](#custom-blazor-icon-support)
35
35
36
36
{% if site.has_cta_panels == true %}
37
37
{% include cta-panel-introduction.html %}
@@ -49,7 +49,7 @@ The Telerik Blazor icons have three prerequisites to work:
49
49
50
50
The Telerik Blazor components use built-in icons with the help of two NuGet packages. They are installed **automatically** as dependencies of the `Telerik.UI.for.Blazor` package:
51
51
52
-
*`Telerik.FontIcons` - defines the `FontIcon``enum` for easier usage of built-in **font**blazor icons
52
+
*`Telerik.FontIcons` - defines the `FontIcon``enum` for easier usage of built-in **font**Blazor icons
53
53
*`Telerik.SvgIcons` - defines the `ISvgIcon` interface and the `SvgIcon` static class for built-in **SVG** icons
54
54
55
55
>tip Unlike the `Telerik.UI.for.Blazor` package, the icon packages are available on the `nuget.org` source. Keep this in mind when using [`packageSourceMapping`](slug:installation/nuget#package-source-mapping).
Copy file name to clipboardExpand all lines: components/grid/overview.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -232,7 +232,7 @@ To execute these methods, obtain reference to the Grid instance via `@ref`.
232
232
"@context":"https://schema.org",
233
233
"@type":"VideoObject",
234
234
"name":"Telerik UI for Blazor Data Grid",
235
-
"description":"The Telerik Grid for Blazor is a powerful component, which allows you to visualize and edit data via its table representation. It provides a variety of options about how to present and perform operations over the underlying data, such as paging, sorting, filtering and editing. In this short video, we'll learn how to bind data to the data grid and customize its features.",
235
+
"description":"The Telerik Grid for Blazor is a powerful component, which allows you to visualize and edit data through its table representation. It provides a variety of options about how to present and perform operations over the underlying data, such as paging, sorting, filtering and editing. In this short video, we'll learn how to bind data to the data grid and customize its features.",
Copy file name to clipboardExpand all lines: getting-started/server-blazor.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ position: 15
11
11
12
12
# First Steps with Server-Side UI for Blazor
13
13
14
-
Blazor Server runs C# on the server and updates the UI in the browser via a SignalR connection, enabling interactive web apps without client-side .NET execution. This article explains how to get the Telerik UI for Blazor components in your .NET 6 or 7 Blazor Server app and start using them quickly. You will create a new application from scratch, learn how to add the UI for Blazor components to a project, and finally, add a UI component to a view.
14
+
Blazor Server runs C# on the server and updates the UI in the browser through a SignalR connection, enabling interactive web apps without client-side .NET execution. This article explains how to get the Telerik UI for Blazor components in your .NET 6 or 7 Blazor Server app and start using them quickly. You will create a new application from scratch, learn how to add the UI for Blazor components to a project, and finally, add a UI component to a view.
15
15
16
16
> This article applies only to the **Blazor Server App** template in Visual Studio, which exists up to .NET 7. If you are using newer .NET versions, then follow the [tutorial about Blazor Web Apps](slug:getting-started/web-app).
17
17
@@ -130,7 +130,7 @@ If you prefer video instructions, you can also check the video tutorial below.
130
130
"@context":"https://schema.org",
131
131
"@type":"VideoObject",
132
132
"name":"Adding Telerik UI for Blazor to an Existing Blazor Project",
133
-
"description":"Telerik UI for Blazor components have been built from the ground-up to ensure you experience shorter development cycles, quick iterations and cut time to market. In this short video, we'll learn how to add the components to an existing Blazor Project.",
133
+
"description":"Telerik UI for Blazor components have been built from the ground-up to ensure you experience shorter development cycles, quick iterations and cut time to market. In this short video, we'll learn how to add the components to an existing Blazor project.",
The [Telerik Blazor Report Designer Component](https://docs.telerik.com/reporting/how-to-blazor-web-report-designer) empowers you to embed a Report Designer tool within your Blazor application. This feature enables end-users to edit existing reports or create new report definitions from scratch, enhancing the versatility of your Blazor Reporting capabilities. Experience this component in action through the [Web Report Designer Demo](https://demos.telerik.com/reporting/designer).
41
+
The [Telerik Blazor Report Designer Component](https://docs.telerik.com/reporting/how-to-blazor-web-report-designer) empowers you to embed a Report Designer tool within your Blazor application. This feature enables endusers to edit existing reports or create new report definitions from scratch, enhancing the versatility of your Blazor Reporting capabilities. Experience this component in action through the [Web Report Designer Demo](https://demos.telerik.com/reporting/designer).
42
42
43
43
By integrating these components, you can significantly enhance the Blazor Reporting functionalities of your application, providing users with comprehensive tools for report viewing, customization, and creation.
0 commit comments