New to Telerik Reporting? Download free 30-day trial

Icons in the Toolbar and Search Dialog of the Native Blazor Report Viewer Appear 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

In this article