telerik · dimodi · Mar 24, 2025 · Mar 24, 2025 · Mar 24, 2025
@@ -1,25 +1,25 @@
 ---
 title: Icons
 page_title: Font and SVG Icons
-description: How to use the built-in font icons in the UI for Blazor suite.
+description: Blazor Icons are customizable, scalable icons for Blazor apps that enhance UI design with easy styling.
 slug: common-features-icons
 tags: telerik,blazor,icon,font,built-in
 published: True
 previous_url: /common-features/font-icons
 position: 1
 ---
 
-# Built-in Font and SVG Icons
+# Blazor SVG and Font Icons
 
-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 icons, or define an application-wide setting, which affects the type of icons in all Telerik Blazor components.
+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.
 
 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.
 
 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.
 
 This article contains the following sections:
 
-* [How do icons work](#how-icons-work)
+* [How do icons work](#how-blazor-icons-work)
     * [Install icon NuGet packages](#icon-nuget-packages)
     * [Import icon namespaces](#icon-namespaces)
     * [Register font icon stylesheet](#font-icon-stylesheet) (SVG icons don't need it)
@@ -29,12 +29,15 @@ This article contains the following sections:
 * [`SvgIcon` component](#svgicon-component)
     * [Render custom SVG Icons with HTML](#render-custom-svg-icons-with-html)
     * [Use custom SVG icon collection](#use-custom-svg-icon-collection)
-* [Set global icon type for the whole application](#set-global-icon-type)
+* [Set global icon type for the whole application](#set-global-blazor-icon-type)
 * [Complete list of built-in icons](#icons-list)
-* [How to use custom icons](#custom-icon-support)
+* [How to use custom icons](#custom-blazor-icon-support)
 
+{% if site.has_cta_panels == true %}
+{% include cta-panel-introduction.html %}
+{% endif %}
 
-## How Icons Work
+## How Blazor Icons Work
 
 The Telerik Blazor icons have three prerequisites to work:
 
@@ -46,7 +49,7 @@ The Telerik Blazor icons have three prerequisites to work:
 
 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:
 
-* `Telerik.FontIcons` - defines the `FontIcon` `enum` for easier usage of built-in **font** icons
+* `Telerik.FontIcons` - defines the `FontIcon` `enum` for easier usage of built-in **font** Blazor icons
 * `Telerik.SvgIcons` - defines the `ISvgIcon` interface and the `SvgIcon` static class for built-in **SVG** icons
 
 >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).
@@ -289,7 +292,7 @@ The `ISvgIcon` interface members are:
 ````
 
 
-## Set Global Icon Type
+## Set Global Blazor Icon Type
 
 It is possible to configure the icon type for the whole application:
 
@@ -328,7 +331,7 @@ 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
+## Custom Blazor Icon Support
 
 Telerik UI for Blazor supports using custom (third-party) icons:
 
@@ -343,4 +346,6 @@ Telerik UI for Blazor supports using custom (third-party) icons:
 
 * <a href="https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/" target="_blank">Built-in Icon List</a>
 * [Blazor Live Demos](https://demos.telerik.com/blazor-ui)
+* [Blazor FontIcon](https://demos.telerik.com/blazor-ui/fonticon/overview)
+* [Blazor SVGIcon](https://demos.telerik.com/blazor-ui/svgicon/overview)
 * [CSS Themes](slug:themes-overview)
@@ -12,7 +12,7 @@ position: 0
 
 This article provides a quick introduction to get your first <a href="https://demos.telerik.com/blazor-ui/grid/overview" target="_blank">Blazor data grid component</a> up and running in a few seconds. There is a video tutorial and a list of the key features.
 
-The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features. They cover everything from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, keyboard navigation and accessibility support.
+The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features that cover everything from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, keyboard navigation, and accessibility support.
 
 The Telerik Blazor grid is built on native Blazor from the ground up, by a company with a long history of making enterprise-ready Grids. This results in a highly customizable Grid that delivers lighting fast performance.
 
@@ -226,3 +226,17 @@ To execute these methods, obtain reference to the Grid instance via `@ref`.
 
 * [Live Demos: Grid](https://demos.telerik.com/blazor-ui/grid/overview)
 * [Grid API Reference](slug:Telerik.Blazor.Components.TelerikGrid-1)
+
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org", 
+  "@type": "VideoObject", 
+  "name": "Telerik UI for Blazor Data Grid", 
+  "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.", 
+  "thumbnailUrl": "https://img.youtube.com/vi/NW2hHtmM2Gk/maxresdefault.jpg", 
+  "uploadDate": "2020-02-13", 
+  "duration": "PT5M10S", 
+  "contentUrl": "https://youtu.be/NW2hHtmM2Gk", 
+  "embedUrl": "https://www.youtube.com/embed/NW2hHtmM2Gk" 
+}
+</script> 
@@ -1,7 +1,8 @@
 ---
 title: Blazor Server App
 page_title: First Steps with Blazor Server Apps and Telerik UI for Blazor
-description: Make your first steps with Telerik UI for Blazor and build an app that runs the UI components server-side in Blazor server.
+meta_title: First Steps with Blazor Server-Side UI - Telerik UI for Blazor
+description: Blazor Server is a .NET framework that runs C# on the server, enabling interactive UIs via SignalR.
 slug: getting-started/server-side
 tags: get,started,first,steps,server
 published: true
@@ -10,12 +11,16 @@ position: 15
 
 # First Steps with Server-Side UI for Blazor
 
-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.
+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.
 
 > 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).
 
 @[template](/_contentTemplates/common/get-started.md#prerequisites-tip)
 
+{% if site.has_cta_panels == true %}
+{% include cta-panel-introduction.html %}
+{% endif %}
+
 ## Prerequisites
 
 @[template](/_contentTemplates/common/get-started.md#prerequisites-download)
@@ -42,7 +47,7 @@ This article explains how to get the Telerik UI for Blazor components in your .N
 
 1. Right-click  the Blazor Server project in the solution and select **Manage NuGet Packages**.
 
-![Manage NuGet Packages](images/manage-nuget-packages-for-server-app.png)
+![Manage NuGet Packages in Blazor Server](images/manage-nuget-packages-for-server-app.png)
 
 2. Install the Telerik Blazor NuGet package:
 
@@ -119,3 +124,17 @@ If you prefer video instructions, you can also check the video tutorial below.
 * [Getting Started Videos for Blazor](https://www.youtube.com/watch?v=aaRAZYaJ4xc&list=PLvmaC-XMqeBYPTwcm478vs8Rujq2tiVJo)
 * [First Steps with Blazor Web App](slug:getting-started/web-app)
 * [First Steps with Blazor WebAssembly](slug:getting-started/client-side)
+
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org", 
+  "@type": "VideoObject", 
+  "name": "Adding Telerik UI for Blazor to an Existing Blazor Project", 
+  "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.", 
+  "thumbnailUrl": "https://img.youtube.com/vi/fwR8Yxe7DPQ/maxresdefault.jpg", 
+  "uploadDate": "2020-02-24", 
+  "duration": "PT4M14S", 
+  "contentUrl": "https://youtu.be/fwR8Yxe7DPQ", 
+  "embedUrl": "https://www.youtube.com/embed/fwR8Yxe7DPQ" 
+}
+</script>
@@ -17,6 +17,10 @@ This article explains how to use the Telerik UI for Blazor components in a Blazo
 
 > Telerik UI for Blazor [requires interactive render mode](#interactive-render-mode). Using [**Global** Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#apply-a-render-mode-to-the-entire-app) is highly recommended.
 
+{% if site.has_cta_panels == true %}
+{% include cta-panel-introduction.html %}
+{% endif %}
+
 ## Prerequisites
 
 @[template](/_contentTemplates/common/get-started.md#prerequisites-download)

@@ -1,22 +1,27 @@
 ---
 title: Reporting
 page_title: Reporting
+meta_title: Blazor Reporting enables creating, viewing, and exporting dynamic reports in Blazor apps, combining .NET with web UI.
 description: Reporting for Blazor apps.
 slug: reporting-in-blazor
 position: 0
 ---
 
 # Blazor Reporting
 
-You can utilize the [Telerik Reporting](https://www.telerik.com/products/reporting) product to embed reporting functionality in your Blazor app. We provide the following components for easy integration (find detailed information in the respective articles that are part of the Telerik Reporting product documentation).
+To effectively integrate Blazor Reporting functionalities into your Blazor application, you can leverage the capabilities provided by [Telerik Reporting](https://www.telerik.com/products/reporting). This integration offers several components tailored for Blazor, enhancing your application's reporting features.
+
+{% if site.has_cta_panels == true %}
+{% include cta-panel-introduction.html %}
+{% endif %}
 
 * [Telerik Blazor Report Viewer](#telerik-blazor-report-viewer)
 * [Telerik Native Blazor Report Viewer](#telerik-native-blazor-report-viewer)
 * [Telerik Blazor Report Designer Component](#telerik-blazor-report-designer)
 
 ## Telerik Blazor Report Viewer
 
-The [Telerik Blazor Report Viewer Component](https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/overview) enables you to embed a report preview into you app. The component is built on top of our robust and reliable HTML5 Report Viewer - a JavaScript/jQuery widget with lots of customization options. See this report viewer component into action in the [Dashboard Report Demo](https://demos.telerik.com/reporting/dashboard). This report viewer includes the following functionality:
+The [Telerik Blazor Report Viewer Component](https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/overview) allows you to embed Blazor Reporting previews directly within your Blazor application. Built upon the robust HTML5 Report Viewer, this component offers extensive customization options. See this report viewer component into action in the [Dashboard Report Demo](https://demos.telerik.com/reporting/dashboard). Key functionalities include:
 
 * Preview the pages of the resulting report document on screen;
 * Print the report;
@@ -25,18 +30,20 @@ The [Telerik Blazor Report Viewer Component](https://docs.telerik.com/reporting/
 * Use any other interactive features that the Telerik Reporting product offers.
 
 >caption Dashboard Report Demo
-![dashboard report demo](images/dashboard-report-demo.png)
+![Blazor dashboard report demo](images/dashboard-report-demo.png)
 
 ## Telerik Native Blazor Report Viewer
 
 The [Telerik Native Blazor Report Viewer Component](https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview) is a report viewer built with **native Blazor components** from our Telerik UI for Blazor library (requires a valid license). This report viewer brings a fluent user experience that blends with the rest of your Blazor application using the same input controls and styling mechanism. The initial version of this viewer supports all the core functionality needed for previewing and exporting report documents.
 
 ## Telerik Blazor Report Designer
 
-The [Telerik Blazor Report Designer Component](https://docs.telerik.com/reporting/how-to-blazor-web-report-designer) enables you to embed a Report Designer tool in your Blazor application. This empowers your trusted end-users to edit existing or create new report definitions from scratch. See the Report Designer into action in the [Web Report Designer Demo](https://demos.telerik.com/reporting/designer)
+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).
+
+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.
 
 >caption Web Report Designer Demo
-![web report designer demo](images/web-report-designer-demo.png)
+![Blazor web report designer demo](images/web-report-designer-demo.png)
 
 
 ## See Also

@@ -1,7 +1,8 @@
 ---
 title: Introduction
 page_title: Blazor Documentation for UI Components
-description: Check out the Telerik UI for Blazor documentation for guidance and examples on creating web applications with .NET using C# for the front-end.
+meta_title: Blazor Documentation - Telerik UI for Blazor
+description: Read the Telerik UI for Blazor documentation for guidance and examples on creating web apps with .NET using C#.
 slug: blazor-overview
 position: 1
 ---
@@ -257,3 +258,17 @@ For any issues you might encounter while working with Telerik UI for Blazor, use
 * Use guided wizards to generate new Telerik Projects in [Visual Studio](slug:getting-started-vs-integration-new-project) and [Visual Studio Code](slug:getting-started-vs-code-integration-overview).
 * [Convert an existing project to a Telerik-enabled project](slug:getting-started-vs-integration-convert-project)
 * [Style the Telerik Blazor Components](slug:themes-overview)
+
+<script type="application/ld+json"> 
+{
+  "@context": "https://schema.org", 
+  "@type": "VideoObject", 
+  "name": "Getting Started with Telerik UI for Blazor: Overview | Chapter 1", 
+  "description": "In this introductory chapter, we’ll provide a complete overview of the course and what you can expect to learn. We’ll cover the essentials of Telerik UI for Blazor, including the prerequisites needed to get started and the resources available to you. Take a tour of the demo application and get acquainted with the course downloads to ensure you’re fully prepared for the journey ahead.", 
+  "thumbnailUrl": "https://img.youtube.com/vi/HKsTL4byyTA/maxresdefault.jpg", 
+  "uploadDate": "2024-10-21", 
+  "duration": "PT13M49S", 
+  "contentUrl": "https://youtu.be/HKsTL4byyTA", 
+  "embedUrl": "https://www.youtube.com/embed/HKsTL4byyTA" 
+} 
+</script>
@@ -20,6 +20,10 @@ Telerik UI for Blazor comes with a set of built-in CSS themes that control the v
 * How to [register a theme in your app](#using-a-theme)
 * How to [ensure compatibility between the Telerik components and the theme version](#compatibility-and-maintenance)
 
+{% if site.has_cta_panels == true %}
+{% include cta-panel-introduction.html %}
+{% endif %}
+
 ## Basics
 
 ### What is a Theme?