SOLVED

JSON Clickable Action and sp-field-quickActions

%3CLINGO-SUB%20id%3D%22lingo-sub-1191775%22%20slang%3D%22en-US%22%3EJSON%20Clickable%20Action%20and%20sp-field-quickActions%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1191775%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20trying%20to%20format%20a%20quickfield%20action%20to%20open%20a%20task%20view%20link.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EEverything%20works%20as%20intended%20but%20I%20can't%20format%20the%20icon%3B%20the%20most%20it%20does%20is%20change%20to%20red%20when%20using%20the%20sp-field-trending--down%20class%20but%20if%20I%20use%20the%20sp-field-quickActions%2C%20it%20simply%20ignores%20it%20and%26nbsp%3B%20displays%20as%20a%20regular%20ugly%20blue%2Fpurple%20hyperlink.%20I%20want%20to%20use%20a%20red%20or%20blue%20color%20(no%20ugly%20underline%20and%20make%20it%20a%20little%20bit%20bigger)%2C%20any%20help%20would%20be%20greatly%20appreciated.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere's%20the%20code%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%7B%0A%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%22debugMode%22%3A%20true%2C%0A%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%22children%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22span%22%2C%0A%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22padding-right%22%3A%20%228px%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22txtContent%22%3A%20%22%5B%24ID%5D%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22a%22%2C%0A%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22iconName%22%3A%20%22%3Dif(%5B%24Tasks_x0020_List%5D%20%26gt%3B%200%2C'TaskLogo'%2C%20'')%22%2C%0A%20%20%20%20%20%20%20%20%22class%22%3A%20%22sp-field-quickActions%22%2C%0A%20%20%20%20%20%20%20%20%22target%22%3A%20%22_blank%22%2C%0A%20%20%20%20%20%20%20%20%22href%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%2B%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22https%3A%2F%2F-----.sharepoint.com%2FeQMS%2FLists%2FCustomer%2520Complaints%2520Tasks%2FAllItems.aspx%23InplviewHash2000000e63d8bd3fdec%3DFilterField1%253DComplaint%25255Fx0020%25255FID-FilterValue1%253D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%5B%24ID%5D%22%0A%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere's%20the%20result%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20image-alt%3D%22sharepoint%20help.png%22%20style%3D%22width%3A%20269px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F173144i32EBC67C6ABF0311%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22sharepoint%20help.png%22%20alt%3D%22sharepoint%20help.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1191775%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EColumn%20Formatting%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EJson%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1192624%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Clickable%20Action%20and%20sp-field-quickActions%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1192624%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F509382%22%20target%3D%22_blank%22%3E%40AngeloEG%3C%2FA%3E%26nbsp%3BSo%20there%20are%20few%20things%20to%20mention%3A%3C%2FP%3E%3COL%3E%3CLI%3Esp-field-quickActions%20class%20does%20not%20exist%20-%20there%20is%20only%20sp-field-quickAction%2C%20but%20this%20does%20not%20matter.%3C%2FLI%3E%3CLI%3EThese%20are%20the%20properties%20you%20will%20find%20in%20quickAction%3C%2FLI%3E%3C%2FOL%3E%3CPRE%20class%3D%22lia-code-sample%20language-css%22%3E%3CCODE%3E.sp-field-quickAction%20%7B%0A%20%20padding%3A%200%3B%0A%7D%0A%5Bdir%3D%22ltr%22%5D%20.sp-field-quickAction%20%7B%0A%20%20padding-left%3A%208px%3B%0A%7D%0A%5Bdir%3D%22rtl%22%5D%20.sp-field-quickAction%20%7B%0A%20%20padding-right%3A%208px%3B%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3ESo%20literally%20nothing%20that%20could%20make%20your%20icon%20more%20colorful.%3C%2FP%3E%3CP%3E%26nbsp%3B3.%20You%20render%20%3CA%3E%20and%20you%20get%20OOTB%20browser%20experience%2C%20that%20is%20why%20you%20get%20treatment%20with%20%3CFONT%20color%3D%22%23800080%22%3E%3CU%3Eunderline%3C%2FU%3E%3C%2FFONT%3E%20and%20%3CU%3E%3CFONT%20color%3D%22%23800080%22%3Ecolors%3C%2FFONT%3E%3C%2FU%3E%20for%20%3Avisited%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%20use%20something%20like%20this%20to%20get%20you%20started%2C%20and%20use%20fonts%20and%20colors%20right%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%20%20%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%20%20%22debugMode%22%3A%20true%2C%0A%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%22children%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22span%22%2C%0A%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22Whatever%22%2C%0A%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22sp-field-quickAction%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22a%22%2C%0A%20%20%20%20%20%20%20%20%22style%22%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text-decoration%22%3A%20%22inherit%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22inherit%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22font-size%22%3A%20%22inherit%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22font-weight%22%3A%22inherit%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22class%22%3A%20%22sp-field-quickAction%20sp-field-iconRightAligned%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22iconName%22%3A%20%22TaskLogo%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22target%22%3A%20%22_blank%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22href%22%3A%20%22%2F%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1193297%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Clickable%20Action%20and%20sp-field-quickActions%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1193297%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%20very%20much%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F566038%22%20target%3D%22_blank%22%3E%40orchee%3C%2FA%3E%20that%20solved%20the%20problem!%20Yous%20insight%20is%20most%20appreciated.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EQuick%2C%20question%2C%20where%20did%20you%20find%20the%20definition%20for%20the%20classes%3F%20I%20tried%20inspecting%20the%20webpage%20but%20ended%20up%20with%20a%20blob%20of%20definitions%2C%20so%20it%20was%20trying%20to%20find%20a%20needle%20on%20a%20haystack.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1193306%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Clickable%20Action%20and%20sp-field-quickActions%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1193306%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F509382%22%20target%3D%22_blank%22%3E%40AngeloEG%3C%2FA%3EHappy%20to%20hear%20that!%3CBR%20%2F%3E%3CBR%20%2F%3EI'm%20sorry%20to%20disappoint%20you%2C%20but%20I%20do%20not%20have%20any%20special%20access%20to%20css%20files%2C%20I'm%20using%20source%20code%20and%20find%20function%2C%20the%20only%20tip%20I%20can%20give%20is%20to%20copy%20whole%20%3CSTYLE%3E%20sections%20to%20VS%20Code%20and%20prettify%20it%20for%20some%20clarity.%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Blt%3B%2FP%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Blt%3B%2Flingo-body%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bgt%3B%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Blt%3B%2Flingo-body%26amp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bamp%3Bgt%3B%3C%2FSTYLE%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1193727%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Clickable%20Action%20and%20sp-field-quickActions%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1193727%22%20slang%3D%22en-US%22%3E%3CP%3EA%20special%20thanks%20to%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F566038%22%20target%3D%22_blank%22%3E%40orchee%3C%2FA%3E%20for%20his%20help.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAs%20reference%2C%20this%20is%20how%20it%20ended%20up%20looking%2C%20nice%20blue%20and%20red%20icons%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22sharepoint%20help.png%22%20style%3D%22width%3A%20260px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F173458i5FCBFC813B8BCC04%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22sharepoint%20help.png%22%20alt%3D%22sharepoint%20help.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere's%20the%20code%20from%20above%20as%20reference%20to%20anyone%20looking%20to%20do%20something%20similar%3B%20the%20icons%20display%20only%20when%20the%20record%20has%20a%20link%20to%20a%20separate%20list%20(either%20tasks%20or%20email%20records%20in%20my%20case)%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%7B%0A%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%22debugMode%22%3A%20true%2C%0A%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%22children%22%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22span%22%2C%0A%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22class%22%3A%20%22sp-field-quickAction%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22txtContent%22%3A%20%22%5B%24ID%5D%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22a%22%2C%0A%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22text-decoration%22%3A%20%22inherit%22%2C%0A%20%20%20%20%20%20%20%20%22color%22%3A%20%22%233f72af%22%2C%0A%20%20%20%20%20%20%20%20%22font-size%22%3A%20%221.3em%22%2C%0A%20%20%20%20%20%20%20%20%22font-weight%22%3A%20%22inherit%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22class%22%3A%20%22sp-field-quickAction%20sp-field-iconRightAligned%22%2C%0A%20%20%20%20%20%20%20%20%22iconName%22%3A%20%22%3Dif(%5B%24Tasks_x0020_List%5D%20%26gt%3B%200%2C'TaskLogo'%2C%20'')%22%2C%0A%20%20%20%20%20%20%20%20%22target%22%3A%20%22_blank%22%2C%0A%20%20%20%20%20%20%20%20%22href%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%2B%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22https%3A%2F%2F---.sharepoint.com%2FeQMS%2FLists%2FCustomer%2520Complaints%2520Tasks%2FAllItems.aspx%23InplviewHash-47e6-aa73-e63d8bd3fdec%3DFilterField1%253DComplaint%25255Fx0020%25255FID-FilterValue1%253D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%5B%24ID%5D%22%0A%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22elmType%22%3A%20%22a%22%2C%0A%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22text-decoration%22%3A%20%22inherit%22%2C%0A%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23f6416c%22%2C%0A%20%20%20%20%20%20%20%20%22font-size%22%3A%20%221.3em%22%2C%0A%20%20%20%20%20%20%20%20%22font-weight%22%3A%20%22inherit%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22iconName%22%3A%20%22%3Dif(%5B%24eMails_x0020_List%5D%20%26gt%3B%200%2C'Mail'%2C%20'')%22%2C%0A%20%20%20%20%20%20%20%20%22class%22%3A%20%22sp-field-quickAction%20sp-field-iconRightAligned%22%2C%0A%20%20%20%20%20%20%20%20%22target%22%3A%20%22_blank%22%2C%0A%20%20%20%20%20%20%20%20%22href%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%2B%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22https%3A%2F%2F---.sharepoint.com%2FeQMS%2FLists%2FCustomer%2520Complaints%2520eMails%2FComplaint%2520Grouped.aspx%3FFilterField1%3DComplaint%255Fx0020%255FID%26amp%3BFilterValue1%3D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%5B%24ID%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%26amp%3BFilterType1%3DLookup%26amp%3Bviewid%3Da9e%252D7f01891666a0%22%0A%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

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:

sharepoint help.png

 

4 Replies
Highlighted
Best Response confirmed by AngeloEG (New Contributor)
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": "/"
        }
      }
    ]
  }
Highlighted

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.

 

Highlighted

@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.

Highlighted

A special thanks to @orchee for his help.

 

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

sharepoint help.png

 

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"
          ]
        }
      }
    }
  ]
}