How can I add custom icon in Syncfusion ASP.NET ReportViewer toolbar?

  <form id="form1" runat="server"  onsubmit="return false" style="overflow: hidden; padding:0; margin: 0;height:100%;width:100%;">
         <ej:ReportViewer ID="ReportViewer1" runat="server" OnClientReportLoaded="reportLoaded" ReportPath="~/App_Data/GroupingAgg.rdl" ProcessingMode="Remote"/>         
    </form>
        <script type="text/javascript">
            var viewerID = "ReportViewer1";
        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>

  <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>