Customizing the default toolbar and context menu item icons in File Manager Control

[Rohit Swarup]

Hi Team,

I want to set custom icons for the default toolbar items (New folder, refresh, download, delete, upload, etc) and the context menu items (delete, download, details, copy, etc)

Is there any way to customize the default toolbar and context menu item icons in the File Manager component.
Can we add a custom template to the toolbar item/context menu item and render an custom SVG icon rather than the default icon.

Thanks in advance.

[Shalini Maragathavel]

Hi Rohit,  

Greetings from Syncfusion Support.  

Based on your query we suspect that you need to set the custom icons for the toolbar and context menu items of the File Manager component. You can achieve this requirement by setting the desired icon value to content property for its corresponding class name as demonstrated in the below code snippet,

app.component.css 

//new folder icon
.e-filemanager .e-fe-newfolder::before,  

.e-fe-popup .e-fe-newfolder::before { 

  content: '\e930'; 

} 

//download icon 

.e-filemanager .e-fe-download::before,  

.e-fe-popup .e-fe-download::before { 

  content: '\e419'  ; 

}
//details icon 

.e-filemanager .e-fe-details::before,  

.e-fe-popup .e-fe-details::before { 

  content: '\e33c'  ; 

} 

Please find the below sample for your reference,

Sample: https://stackblitz.com/edit/angular-6xl5aa?file=app.component.css 

Note: To modify icons for a specific File Manager, you can add a class to that File Manager component through cssClass property and apply required styles through that custom class. 

Please check the below link for details on our icons library for various icons. 

 

Icons: https://ej2.syncfusion.com/angular/documentation/appearance/icons/ 

Please check with the below links to more about File Manager Component.  

Documentation: https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/   

   

Demo: https://ej2.syncfusion.com/angular/demos/#/material/file-manager/overview   

   

API: https://ej2.syncfusion.com/angular/documentation/api/file-manager/ 

Please get back to us if you need further assistance.  

Regards,  

Shalini M. 

[Rohit Swarup]

I want to add an icon created using SVG,

IS is possible to do by adding a custom template to the toolbar button icon HTML element.

[Shalini Maragathavel]

Hi Rohit,  

Sorry for the inconvenience.

Based on your query we could understand that your requirement is to add the SVG icons to the toolbar items of File Manager component. You can achieve this requirement by setting the SVG icons using toolbar’s template property in the created event of File Manager as demonstrated in the below code snippet,  

App.component.html

<div class="sample-container"> 

        <ejs-filemanager id='overview' cssClass="custom" [ajaxSettings]='ajaxSettings' 

                (created)="created($event)" [view]='view'> 

        </ejs-filemanager> 

</div> 

----------------------------------------------------------------------------------
App.component.ts 

export class AppComponent { 

  public newfolder: string = 

    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16"><path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"/></svg>&ensp;New Folder'; 

  public upload: string = 

    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-upload" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/><path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z"/></svg>&ensp;Upload'; 

  public refresh: string = 

    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/><path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/></svg>&ensp;Refresh'; 

  public ngOnInit(): void { 

    }; 

  } 

  created(args) { 

    var toolbar = (document.getElementsByClassName('e-toolbar')[0] as any) 

      .ej2_instances[0]; 

    for (var i = 0; i < toolbar.items.length; i++) { 

      switch (toolbar.items[i].text) { 

        case 'New folder': 

          toolbar.items[i].template = this.newfolder; 

          break; 

        case 'Upload': 

          toolbar.items[i].template = this.upload; 

          break; 

        case 'Refresh': 

          toolbar.items[i].template = this.refresh; 

          break; 

      } 

    } 

  } 

} 

In the below sample, we have changed the New folder, Upload and Refresh items icon of the File Manager’s toolbar. Similar to the above code, you can include the SVG icons of your preference.

Please find the below sample for your reference.

Sample: https://stackblitz.com/edit/svg-icons-in-filemanager-toolbar-bsmrre?file=app.component.ts 

Please get back to us if you need further assistance.  

Regards,  

Shalini M. 

[Rohit Swarup]

Thank you for your response. Will try the solution and get back to you if needed.

[Keerthana Rajendran]

Hi Rohit, 

Most welcome. Please try the provided solution and get back to us if you need further assistance. 

Regards, 

Keerthana R.