Forum Discussion

mnward's avatar
mnward
Copper Contributor
Aug 09, 2023

JSON Formatting Person Column, "Clicked" Icon Not Working as Expected?

Hello, I'm having issues with the functionality of the below code, I'm trying to have the icon "Clicked" appear all the time on a column. 

When I save or preview the column formatting it looks like how I want it to appear with the icon visible all the time:

But as soon as I refresh the page the icon disappears, but it reappears when I click an item. It also stays visible if I click off that item to something else:

 

Is this something built into the icon? My code is pretty basic so I'm not sure what I'm doing wrong here and if I change the Icon name to something like "Camera" the disappearing stops and the icon appears all the time. I'd really prefer to use the icon "Clicked" for what I need it would be the best option.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "span",
  "attributes": {
    "iconName": "Clicked",
    "class": "ms-fontColor-themeDark"
  },
  "style": {
    "font-size": "30px",
    "visibility": "visible"
  }
}

 

Lists
SharePoint Online
  • Rob_Elliott's avatar
    Rob_Elliott
    Bronze Contributor
    Aug 09, 2023

    mnward I couldn't find a fluent icon called Clicked. I suspect it's the icon that's the problem. The site I use for these fluent icons, https://www.flicon.io/, has a similar one called Touch which works fine.

     

    Rob
    Los Gallardos
    Microsoft Power Automate Community Super User.
    Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

     

  • ganeshsanap's avatar
    ganeshsanap
    MVP
    Aug 10, 2023

    mnward

     

    As Rob_Elliott suggested, it is recommended by Microsoft to use Fluent UI icons in the SharePoint JSON formatting, Source: 

    Here is the official documentation of Fluent UI available icons: Fluent UI Icons 

    Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Resources