Hyperlink column with with icon instead of text

Question

I have a list with with a hyperlink column that contains a hyperlink to a folder associated with the list item. I created a Power Automate Flow that used the SharePoint connecter, "Send HTTP request" to create the folder and the hyperlink to the folder when the item is created. I'd like to use an image or icon instead of a text value for the hyperlink.

Right now I'm using a Unicode folder icon, but I'd rather use a .png. I'm supposing I might be able to use an image column, but I'm not sure how to accomplish it with the HTTP request or with Power Automate. I have a picture library called pic_lib, with a folder icon called folder.png.

I'd like to use the folder.png as the link to the folder that the hyperlink points to.

Below is the "Send HTTP request" I'm using. Can anyone tell me how to alter it to achieve what I want to do?

Answer 1

I don't think you can add image as a "description" of hyperlink column. You can either add the "Hyperlink with description text" or "Picture with description text" in "Hyperlink or Picture" column type.

Workaround:

As a workaround to show the folder icon in SharePoint online list view, you can use Column formatting.

1. Set the (dummy) description text in hyperlink column using Power Automate (Say "Go to Folder").
2. Then use below one of the JSON codes to format your hyperlink column:

Using Picture:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "=@currentField",
    "target": "_blank",
    "title": "[email protected]"
  },
  "style": {
    "text-decoration": "none",
    "padding-left": "10px"
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "=@currentWeb + '/Shared Documents/folder.png'"
      }
    }
  ]
}

You can pass the URL of picture in src attribute in above JSON.

Output:

Using Fluent UI Icon:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "iconName": "OpenFolderHorizontal",
    "class": "ms-fontColor-themeDark",
    "href": "=@currentField",
    "target": "_blank"
  },
  "style": {
    "font-size": "18px",
    "text-decoration": "none",
    "padding-left": "15px",
    "font-weight": "bold"
  }
}

This is a basic JSON code to achieve what you want, you can apply additional styling to make it look better.

Output:

Note: You can find other predefined icons at Fluent UI website