How can I add custom icon in Syncfusion Angular ReportViewer toolbar?

export class AppComponent {
    public serviceUrl: string;  
    public reportPath: string;
    public serverUrl: string;
    public parameters: any; 
    public actionbuttons: any;
 
    constructor() {
         this.serviceUrl = 'http://localhost:53800/Home';        
         this.reportPath = 'GroupingAgg.rdl';  
    }
 
 reportLoaded(event) {  
 var viewerID = "reportViewer_Control";
            var $ulContainer = $("#" + viewerID + "_toolbarContainer ");
            var $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');
            });    
 }
}