How to change file icon in document library of SharePoint online programatically.

Question

In SharePoint online I am not able to change file icon in Document library while accessing library over internet browser. Netither found any property or ContentType to change at list and site level.

While using CSOM I found some properties like IconOverlay and FileType, On Chnaging FileType it also impacting behaviour of file during access and not able to load IconOverlay.

Is there any straight forward or indirect way by which I can able to access path for icon image and able to change mapping to that image based on file type.

Answer 1

Hi @Good Admin,

You alse can use if judgment to display different UI according to the file type

Firendly Name:

ExcelDocument

{
  "$schema":    "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
 "elmType": "div",
"txtContent": "[$File_x0020_Type]",
  "attributes":{
  "iconName": "=if([$File_x0020_Type]=='pdf','PDF',if([$File_x0020_Type]=='xlsx','ExcelDocument',''))"}
}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards

Cheng Feng

Answer 2

Hi @Good Admin,

Currently there is no such function to change the icon by csom. As a workaround, I would recommend you to use json formating to custom the icon.

You can use predefined icons from Office UI Fabric. For details, see the Fabric website.

{
  "$schema":    "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
 "elmType": "div",
  "attributes":{
  "iconName": "PDF"}
}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.