JSON Clickable Action and sp-field-quickActions

[AngeloEG]

Hi,

I'm trying to format a quickfield action to open a task view link.

Everything works as intended but I can't format the icon; the most it does is change to red when using the sp-field-trending--down class but if I use the sp-field-quickActions, it simply ignores it and  displays as a regular ugly blue/purple hyperlink. I want to use a red or blue color (no ugly underline and make it a little bit bigger), any help would be greatly appreciated.

Here's the code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "debugMode": true,
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "style": {
        "padding-right": "8px"
      },
      "txtContent": "[$ID]"
    },
    {
      "elmType": "a",
      "attributes": {
        "iconName": "=if([$Tasks_x0020_List] > 0,'TaskLogo', '')",
        "class": "sp-field-quickActions",
        "target": "_blank",
        "href": {
          "operator": "+",
          "operands": [
            "https://-----.sharepoint.com/eQMS/Lists/Customer%20Complaints%20Tasks/AllItems.aspx#InplviewHash2000000e63d8bd3fdec=FilterField1%3DComplaint%255Fx0020%255FID-FilterValue1%3D",
            "[$ID]"
          ]
        }
      }
    }
  ]
}

Here's the result:

[#2 · Accepted solution]

@AngeloEG So there are few things to mention:

1. sp-field-quickActions class does not exist - there is only sp-field-quickAction, but this does not matter.
2. These are the properties you will find in quickAction

.sp-field-quickAction {
  padding: 0;
}
[dir="ltr"] .sp-field-quickAction {
  padding-left: 8px;
}
[dir="rtl"] .sp-field-quickAction {
  padding-right: 8px;
}

So literally nothing that could make your icon more colorful.

 3. You render <A/> and you get OOTB browser experience, that is why you get treatment with underline and colors for :visited

You can use something like this to get you started, and use fonts and colors right:

    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "debugMode": true,
    "elmType": "div",
    "children": [
      {
        "elmType": "span",
        "txtContent": "Whatever",
        "attributes": {
            "class": "sp-field-quickAction"
        }
      },
      {
        "elmType": "a",
        "style":{
            "text-decoration": "inherit",
            "color": "inherit",
            "font-size": "inherit",
            "font-weight":"inherit"
        },
        "attributes": {
          "class": "sp-field-quickAction sp-field-iconRightAligned",
          "iconName": "TaskLogo",
          "target": "_blank",
          "href": "/"
        }
      }
    ]
  }

[#3]

Thank you very much @orchee that solved the problem! Yous insight is most appreciated.

Quick, question, where did you find the definition for the classes? I tried inspecting the webpage but ended up with a blob of definitions, so it was trying to find a needle on a haystack.

[#4]

@AngeloEGHappy to hear that!

I'm sorry to disappoint you, but I do not have any special access to css files, I'm using source code and find function, the only tip I can give is to copy whole <style> sections to VS Code and prettify it for some clarity.

[#5]

A special thanks to @orchee for his help.

As reference, this is how it ended up looking, nice blue and red icons:

Here's the code from above as reference to anyone looking to do something similar; the icons display only when the record has a link to a separate list (either tasks or email records in my case):

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "debugMode": true,
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "class": "sp-field-quickAction"
      },
      "txtContent": "[$ID]"
    },
    {
      "elmType": "a",
      "style": {
        "text-decoration": "inherit",
        "color": "#3f72af",
        "font-size": "1.3em",
        "font-weight": "inherit"
      },
      "attributes": {
        "class": "sp-field-quickAction sp-field-iconRightAligned",
        "iconName": "=if([$Tasks_x0020_List] > 0,'TaskLogo', '')",
        "target": "_blank",
        "href": {
          "operator": "+",
          "operands": [
            "https://---.sharepoint.com/eQMS/Lists/Customer%20Complaints%20Tasks/AllItems.aspx#InplviewHash-47e6-aa73-e63d8bd3fdec=FilterField1%3DComplaint%255Fx0020%255FID-FilterValue1%3D",
            "[$ID]"
          ]
        }
      }
    },
    {
      "elmType": "a",
      "style": {
        "text-decoration": "inherit",
        "color": "#f6416c",
        "font-size": "1.3em",
        "font-weight": "inherit"
      },
      "attributes": {
        "iconName": "=if([$eMails_x0020_List] > 0,'Mail', '')",
        "class": "sp-field-quickAction sp-field-iconRightAligned",
        "target": "_blank",
        "href": {
          "operator": "+",
          "operands": [
            "https://---.sharepoint.com/eQMS/Lists/Customer%20Complaints%20eMails/Complaint%20Grouped.aspx?FilterField1=Complaint%5Fx0020%5FID&FilterValue1=",
            "[$ID]",
            "&FilterType1=Lookup&viewid=a9e%2D7f01891666a0"
          ]
        }
      }
    }
  ]
}