How can I add custom icon in Syncfusion PHP ReportViewer toolbar

<?php
require_once 'EJ/AutoLoad.php';
?>
<?php
 $reportviewer = new EJ\ReportViewer('reportViewer');  
        echo $reportviewer->reportServiceUrl("http://localhost:62610/api/ReportApi" )
  ->processingMode("Remote")
  ->reportPath("~/App_Data/GroupingAgg.rdl")
  ->reportLoaded("reportLoaded")
  ->render();
?>
    <style>
         .cols-sample-area
        {
            width: 100%;
            margin: 0 auto;
            float: none;
        }
  #reportViewer{
   height: 550px;
   display: block;
  }
    </style>
 <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>