JSON formatting in list Gallery view not displaying Office UI Fabric Icons

Question

This problem is very similar to this one, except it's not displaying icons and I'm using different JSON code.

Using SharePoint Online, I have a list I use specifically to display customised buttons and tiles dynamically using JSON formatting.

For one such view I am trying to display a tile with an icon (the icon being one of the official Microsoft Office UI Fabric Icons).

The view seems to work ok (i.e. tiles are displayed, with the appropriate text, and links are functioning correctly). The problem, however, is no icon displays, and I'm at a loss as to why. I suspect it's going to be something very simple.

In any case, the list columns being referenced for my particular JSON code are:

• Title: (Single line of text) For displaying the button's label.
• URL: (Single line of text) The link the button directs to.
• icon: (Single line of text) For displaying an icon next to the button text using Fluent UI Icons.
• NewTab: (Yes/No): Specifies whether the link opens in a new browser tab.
• Order: (Number): Determines the button's display order.
• FontSize: (Number): (Optional) Specifies the font size (px) of the button text. Set to 16px if it is blank.
• Description: (Single line of text): (Optional) Displays additional context on hover. Set using ‘Title’ if it is blank.

Below is my JSON code. Any help would be most appreciated.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideSelection": true,
  "height": 136,
  "width": 136,
  "formatter": {
    "elmType": "a",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "width": "130px",
      "height": "130px",
      "box-shadow": "0 2px 8px rgba(0,0,0,.2)",
      "border": "0px solid",
      "border-radius": "12px",
      "cursor": "pointer",
      "text-decoration": "none",
      "margin": "0px"
    },
    "attributes": {
      "class": "ms-fontColor-white ms-bgColor-themePrimary ms-bgColor-themeDarkAlt--hover",
      "href": "[$URL]",
      "target": "=if([$NewTab] == true, '_blank', '')",
      "title": "=if ([$Description] == '', 'Access to ' + [$Title], [$Description])"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "font-size": "28px",
          "margin-top": "=if ([$icon] == '', '48px', '20px')",
          "margin-bottom": "=if ([$icon] == '', '-6px', '6px')"
        },
        "attributes": {
          "iconName": "[$icon]"
        }
      },
      {
        "elmType": "div",
        "style": {
          "font-size": "=if([$FontSize], [$FontSize] + 'px', '16px')",
          "text-align": "center",
          "line-height": "1em",
          "width": "90%"
        },
        "txtContent": "=if ([$Title] == '', '–', [$Title])"
      }
    ]
  }
}

Answer 1

To display the icon correctly, replace the div with a span element. The span element is the recommended choice for rendering icons in SharePoint JSON formatting. You can keep your existing styles (like font-size and conditional margins) to control the icon’s appearance. Here’s the corrected section:

{
  "elmType": "span",
  "style": {
    "font-size": "28px",
    "margin-top": "=if ([$icon] == '', '48px', '20px')",
    "margin-bottom": "=if ([$icon] == '', '-6px', '6px')"
  },
  "attributes": {
    "iconName": "[$icon]"
  }
}