How to add custom icon in Syncfusion ASP.NET MVC ReportViewer toolbar

1 min read

Syncfusion ASP.Net MVC ReportViewer allows you to add or modify an icon to customize the standard toolbar. The following code snippet illustrates how to add the Mail icon to the ReportViewer toolbar container using the template and CSS style.

<div id="ControlRegion" style="height:100% ;position:absolute;">
        <div>
            @(Html.EJ().ReportViewer("reportviewer").ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Remote).ReportPath("~/App_Data/Grouping Aggregate.rdl").ReportServiceUrl("/api/ReportAPI").ReportLoaded("reportLoaded"))
        </div>
        @(Html.EJ().ScriptManager())
    </div>
    <script type="text/javascript">
        var viewerID = "reportviewer";
        function reportLoaded(senderObj) {
            var $ulContainer = $("#" + viewerID + "_toolbarContainer ");
            $divouter = ej.buildTag("ul.e-reportviewer-toolbarul e-ul e-horizontal ", "", {}, {});
            var $lifil = ej.buildTag("li.e-reportviewer-toolbarli e-tooltxt", "", { 'display': 'inline-block', }, { 'id': viewerID + '_toolbar_fil', 'title': 'Mail' });
            var $spanfil = ej.buildTag("span.e-icon e-mail e-reportviewer-icon", "", {}, { 'id': viewerID + '_toolbar_fil' });
 
            $divouter.append($lifil);
            $lifil.append($spanfil);
            $ulContainer.append($divouter);
 
            $lifil.hover(function () {
                $lifil.addClass("e-hover");
            }, function () {
                $lifil.removeClass("e-hover");
            });
 
            $divouter.click(function (e) {
                alert('Action Triggered');
            });
        }
    </script>

Add the following CSS code example inside the <style> tag in _Layout.cshtml.

  <style>
        .e-reportviewer * {
            -webkit-box-sizing: content-box !important;
            -moz-box-sizing: content-box !important;
            box-sizing: content-box !important;
        }
 
        .e-mail {
            width: 20px;
            height: 20px;
            margin-top: 1px;
        }
    </style>

Run the application, the additional custom icon is added to the ReportViewer toolbar as shown in the following output snap.

How to add custom icon in Syncfusion ASP.NET MVC ReportViewer toolbar

Access denied