Change the default icons for files and add for other file types

[Chirag Vaswani]

1. How do we change the default icons that are provided by syncfusion to other icons?
2. How do we add new ones like for the files types that don't have default icons?

[LeoLavanya Dhanaraj]

Hi Chirag,

Greetings from Syncfusion support.

From the shared details, we understand that you want to change the default folder/file icon of the File Manager component. You can use the below CSS selector to achieve your requirement. Check out the below code snippet and sample for your reference.

1. Change the default icons that are provided by Syncfusion to other icons : Class name => .e-filemanager .e-fe-folder – for removing default image , .e-filemanager .e-fe-folder::before - to set new icons.
2. How do we add new ones like for the file types that don't have default icons(Unknown file types) : Class name => .e-filemanager .e-fe-unknown– for removing default image , .e-filemanager .e-fe-unknown::before - to set new icons.

Sample : https://stackblitz.com/edit/react-sxh61z?file=index.css,index.html

/* css */

.e-filemanager .e-fe-folder,

.e-filemanager .e-fe-music,

.e-filemanager .e-fe-docx,

.e-filemanager .e-fe-pdf,

.e-filemanager .e-fe-video,

.e-filemanager .e-fe-unknown {

  background-image: none !important;

  font-family: 'e-icons' !important;

  font-style: normal !important;

}

 

.e-filemanager .e-fe-folder::before {

  content: '\e83c';

}

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

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

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

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

.e-filemanager .e-fe-unknown::before {

  content: '\e8f1';

}

Output screenshot:

Also, please refer the below documentation link for the Syncfusion icons customization.

https://ej2.syncfusion.com/react/documentation/appearance/icons#material

Check out the above sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Sumit]

Thanks, Now we are able to set our own icons. But unable to set different icons for different image extensions. For all image extensions can be able to set only one icon. Can you please share for that as well.

i.e- we have different icons for png , jpg, bmp, heic

[LeoLavanya Dhanaraj]

Hi Sumit,

Based on the details provided, it is understood that you wish to modify the default image for PNG, JPEG, and other image types within the FileManager component. A sample has been prepared and included to fulfill your request. In this sample, a custom class has been added to the image tag using appropriate CSS selectors within the fileLoad event, and the content has been set in the CSS styles.

Check out the below sample and code snippets for further assistance.

Sample : https://stackblitz.com/edit/react-sxh61z-352hfk?file=index.css,index.js

[index.js]

<FileManagerComponent

  id="overview_file"

  ajaxSettings={{

    url: hostUrl + 'api/FileManager/FileOperations',

    getImageUrl: hostUrl + 'api/FileManager/GetImage',

    uploadUrl: hostUrl + 'api/FileManager/Upload',

    downloadUrl: hostUrl + 'api/FileManager/Download',

  }}

  fileLoad={onFileLoad}

> 

  <Inject services={[NavigationPane, DetailsView, Toolbar]} />

</FileManagerComponent>

 

const onFileLoad = (args) => {

  const { type } = args.fileDetails;

  const imageElement = args.element.querySelector('.e-fe-image');

  if (type) {

    const classMap = {

      '.png': 'customPNG',

      '.jpg': 'customJPEG',

    };

    if (classMap[type]) {

      imageElement.classList.add(classMap[type], 'e-icons');

    }

    imageElement.classList.remove('e-fe-image');

  }

};

 

[index.css]

.e-filemanager .customPNG::before {

  content: '\e7ee';

}

 

.e-filemanager .customJPEG::before {

  content: '\e8f1';

}