reporting-docs/knowledge-base/blank-icons-in-blazor-native-report-viewer.md

title	page_title	description	type	slug	res_type
Toolbar Icons and Search Dialog of Native Blazor Viewer Are Blank	Icons not shown in toolbar and search dialog of Native Blazor Viewer	Learn how to visualize all the toolbar and search dialog icons of the Native Blazor Report Viewer built with Telerik Blazor UI 3.7.0 when using Telerik Blazor UI 4.0.0.	how-to	blank-icons-in-blazor-native-report-viewer	kb

Environment

Product	Progress® Telerik® Reporting
Application Type	Web Application
Report Viewer	Blazor Native Report Viewer
Version	17.0.23.118 or lower

Description

The issue is described in the bug report Several icons are not visualized in the toolbar and search dialog of the Native Blazor Report Viewer.

The [Blazor Native Report Viewer]({%slug telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview%}) with version 17.0.23.118 or lower is built with Telerik.UI.forBlazor 3.7.0 components.

With Telerik.UI.forBlazor 4.0.0 the Telerik Blazor UI team introduced a breaking change in Icon names. Instead of String, they should be referenced as the newly introduced Enum values - see Icons List.

Solution

With Telerik Blazor UI version 4.0.0

Apply the following changes in:

• _Layout.cshtml for .NET 6 projects
• Host.cshtml for .NET 7 projects

1. Download the CSS file icon-patch.css from our GitHub repository and save it to your project, for example in the folder wwwroot/css.

2. Reference the icon-patch.css after the CSS file of the viewer:

   <link rel="stylesheet" href="css/icon-patch.css" />

3. Change the Kendo Theme CSS reference to version 4.0.0:

   <link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/4.0.0/kendo-theme-default/all.css" />

The relevant part of the code in the CSHTML file should look like:

<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<script src="_content/Telerik.ReportViewer.BlazorNative/js/reporting-blazor-viewer.js"></script>

<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/4.0.0/kendo-theme-default/all.css" />

<link href="_content/Telerik.ReportViewer.BlazorNative/css/reporting-blazor-viewer.css" rel="stylesheet" />
<link rel="stylesheet" href="css/icon-patch.css" />

With Telerik Blazor UI version 4.0.1 or higher

Apply the following changes in:

• _Layout.cshtml for .NET 6 projects
• Host.cshtml for .NET 7 projects

1. Download the CSS file icon-patch-4-0-1.css from our GitHub repository and save it to your project, for example in the folder wwwroot/css.

2. Reference the icon-patch-4-0-1.css after the CSS file of the viewer:

   <link rel="stylesheet" href="css/icon-patch-4-0-1.css" />

3. Change the Kendo Theme CSS reference to version 4.0.1:

   <link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/4.0.1/kendo-theme-default/all.css" />

The relevant part of the code in the CSHTML file should look like:

<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<script src="_content/Telerik.ReportViewer.BlazorNative/js/reporting-blazor-viewer.js"></script>

<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/4.0.1/kendo-theme-default/all.css" />

<link href="_content/Telerik.ReportViewer.BlazorNative/css/reporting-blazor-viewer.css" rel="stylesheet" />
<link rel="stylesheet" href="css/icon-patch-4-0-1.css" />

See Also

• [Blazor Native Report Viewer]({%slug telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview%})
• Telerik Blazor UI Icons List
• Telerik.UI.forBlazor 4.0.0