Toolbar Icons and Search Dialog of Native Blazor Viewer Are Blank

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 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
• Telerik Blazor UI Icons List
• Telerik.UI.forBlazor 4.0.0