File Manager Bootstrap Icons

Question

Hi Syncfusion Team,

I was wondering about how you can set the "Theme" of the file manager to the one that is on this website: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/file-manager/overview because mine looks like the one on this website: https://ej2.syncfusion.com/angular/demos/?_ga=2.58306154.1723307059.1641798582-915609888.1632837346#/material/file-manager/overview Kind regards,Peter

Keerthana Rajendran · Answer

Hi Peter, 
 
Thanks for contacting Syncfusion support. 
 
You can set the bootstrap5 theme for File Manager by referring the below stylesheet in your sample. 
 




<link href=https://cdn.syncfusion.com/ej2/bootstrap5.css rel="stylesheet" /> 
 
Sample: https://stackblitz.com/edit/angular-isgv25?file=index.html 
 
Refer to the following UG links for more details on Themes and File Manager component.  
 
Themes: https://ej2.syncfusion.com/angular/documentation/appearance/theme/ 
                https://ej2.syncfusion.com/angular/documentation/common/how-to/custom-css/ 
 
File Manager: https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/#adding-style-sheet-to-the-application 
 
Please let us know if you need any further assistance. 
 
Regards, 
Keerthana R.

Peter Linecker · Answer

Hi Syncfusion Team,Thanks for the reply. It kind of worked. I also had to change my style import from "@import "../node_modules/@syncfusion/ej2-filemanager/styles/material.css" to "@import  "../node_modules/@syncfusion/ej2-filemanager/styles/bootstrap5.css".But i still got the problem that the button styles and icon styles are missing because i can't change @import "../node_modules/@syncfusion/ej2-base/styles/material.css" and @import  "../node_modules/@syncfusion/ej2-buttons/styles/material.css" because they are used in other syncfusion components which I don't want to change the way they look.Is there any way you can change only the file managers appereance?Thanks, Peter

Shameer Ali Baig Sulaiman Ali Baig · Answer

Hi Peter, 

We understood that you are expecting to apply different themes for different EJ2 components in your application. You can achieve this requirement by rendering the components to have unique themes separately in an individual component of your application. 

Please, refer the attached sample to meet your expected requirement. 

Also, you can make use of Theme Studio tool from Syncfusion to customize the styles of any specific EJ2 components. Please, check out the following link to know more about it. 

https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio/ 
 
https://www.syncfusion.com/blogs/post/introducing-theme-studio-for-syncfusion-essential-js-2-components.aspx 
 
Themes supported for EJ2: https://ej2.syncfusion.com/angular/documentation/appearance/theme/ 

Please, let us know if you need any further assistance. 

Regards, 
Shameer Ali Baig S.