Indicator Card: Replace numeric value with icon

dwold

I would like to show an icon rather than and numeric value. The icon will be dependent on an attribute field: Score. I know my advanced formatting code is completely wrong. Any suggestions on how to make this happen? I've attached a screen grab of my code

Less than 33 return red halo icon

Between 33 and 67 return yellow halo icon

Over 67.1 return red halo icon

 

Icons:

 

@jcarlson you've helped me in the past! 🙂 Any suggestions?

Advanced format code.png

BarryNorthey_4-1728673538223.png

jcarlson

Oh, this should be easy enough. First, though, you're referencing the icon name as the literal string "score", not the variable score.

But secondly, that's only going to try and find an icon with that URL as the name, so that won't work. When you enable Advanced Formatting, the Icons section of your indicator settings changes:

 

So what you'd need to do is add three icons here and name them, maybe red, yellow, green. Then you'd need to pick the icons for each. Since these are custom, you'll need SVG. I pulled one of your images into Inkscape, and made a close approximation of them, but you may want to adjust the values.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   viewBox="0 0 159.43667 159.73098"
   version="1.1"
   id="svg5"
   xml:space="preserve"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"><defs
     id="defs2" /><g
     id="layer1"
     transform="translate(10.187083,-44.028057)"><path
       id="path11684"
       style="font-weight:bold;font-size:12.0433px;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.598887;stroke-linecap:square"
       transform="matrix(-0.85997227,0,0,-1.1628282,1.4583332e-8,1.2708333e-6)"
       d="m -13.059105,-106.54418 a 68.169762,50.670101 0 0 1 -68.169762,50.670099 68.169762,50.670101 0 0 1 -68.169763,-50.670099 68.169762,50.670101 0 0 1 68.169763,-50.6701 68.169762,50.670101 0 0 1 68.169762,50.6701 z" /><path
       style="fill:#003366;fill-opacity:1;stroke-width:0.757901"
       d="m 55.540336,131.82589 12.853993,-12.39631 0.227333,4.05945 c 0.29397,5.25125 1.525034,5.25181 1.819117,7.1e-4 l 0.227333,-4.0586 12.877905,12.39546 12.87792,12.39561 H 84.114363 71.804875 v -3.78964 -3.7895 h -2.273697 -2.273697 v 3.7895 3.78964 H 54.971905 42.686329 Z m 15.50664,-0.48876 c 0,-1.76837 -0.336879,-2.27376 -1.515798,-2.27376 -1.179005,0 -1.515798,0.50582 -1.515798,2.27376 0,1.76836 0.336878,2.27375 1.515798,2.27375 1.179005,0 1.515798,-0.50581 1.515798,-2.27375 z m -24.252814,-9.09488 v -5.30523 l -1.515798,-1.51575 c -0.833743,-0.83402 -2.500249,-1.51588 -3.703479,-1.51588 h -2.18768 l -0.333753,-2.27361 -0.333753,-2.27376 h 30.811394 30.811397 l -0.33376,2.27376 -0.33375,2.27361 H 97.4873 c -1.203159,0 -2.869792,0.682 -3.703478,1.51588 l -1.515799,1.51575 v 5.30523 5.30538 h -2.916736 -2.916708 l -0.160128,-5.48511 c -0.110825,-3.77657 -0.536789,-5.90128 -1.369254,-6.82112 l -1.208984,-1.33558 H 69.531178 55.366001 l -1.208985,1.33558 c -0.832464,0.91927 -1.258997,3.04455 -1.369253,6.82112 l -0.160128,5.48511 H 49.710913 46.79419 Z m -8.336904,-16.67372 v -1.51589 h 31.07392 31.073922 v 1.51589 1.51574 H 69.531178 38.457258 Z m 17.810657,-8.428791 c -0.833743,-0.457507 -2.484449,-1.984331 -3.668356,-3.393937 l -2.152571,-2.562893 2.148764,-0.816977 c 1.679378,-0.637952 2.693268,-0.556965 4.641453,0.372258 1.370959,0.653581 2.955298,1.189234 3.520717,1.189234 0.565349,0 5.74085,-1.70528 11.500965,-3.789495 11.002083,-3.980882 15.908962,-4.723549 16.748914,-2.534619 0.749914,1.954068 -1.920735,3.59541 -12.879497,7.915302 -10.357694,4.083039 -16.857621,5.268579 -19.860389,3.622264 z m 3.880486,-11.577207 -2.940607,-2.517284 2.107062,-0.528549 c 1.405201,-0.352366 3.721424,0.04263 6.953315,1.182131 l 4.846252,1.710963 -3.254809,1.321372 c -4.298082,1.744921 -4.310443,1.743074 -7.711213,-1.167922 z"
       id="path336" /><path
       style="color:#000000;fill:#003366;fill-opacity:1;stroke-linecap:square;-inkscape-stroke:none"
       d="m 69.53125,55.521484 c -37.638007,0 -68.2460938,30.674613 -68.2460938,68.371096 10e-8,37.69648 30.6080868,68.37304 68.2460938,68.37304 37.63801,0 68.24609,-30.67656 68.24609,-68.37304 0,-37.696483 -30.60808,-68.371096 -68.24609,-68.371096 z m 0,9.945313 c 32.25227,0 58.30078,26.093804 58.30078,58.425783 0,32.33198 -26.04851,58.42578 -58.30078,58.42578 -32.25227,0 -58.300781,-26.0938 -58.300781,-58.42578 0,-32.331979 26.048511,-58.425783 58.300781,-58.425783 z"
       id="path991" /><path
       style="color:#000000;fill:#c53028;fill-opacity:1;stroke-width:1.1681;stroke-linecap:square;-inkscape-stroke:none"
       d="m 69.531237,203.75905 c 43.965003,0 79.718353,-35.83105 79.718353,-79.86436 0,-44.033293 -35.75335,-79.866633 -79.718353,-79.866633 -43.96499,0 -79.71832,35.83334 -79.71832,79.866633 0,44.03331 35.75333,79.86436 79.71832,79.86436 z m 0,-11.61713 c -37.6739,0 -68.10119,-30.48021 -68.10119,-68.24723 0,-37.767023 30.42729,-68.247223 68.10119,-68.247223 37.673923,0 68.101223,30.4802 68.101223,68.247223 0,37.76702 -30.4273,68.24723 -68.101223,68.24723 z"
       id="path991-2" /><g
       aria-label="Transportation"
       transform="scale(0.85997227,1.1628282)"
       id="text1148"
       style="font-weight:bold;font-size:12.0433px;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans Bold';text-align:center;text-anchor:middle;fill:#003366;stroke-width:0.497856;stroke-linecap:square"><path
         d="m 43.549751,131.08457 v 6.94489 h -1.734753 v -6.94489 h -2.675635 v -1.34075 h 7.091904 v 1.34075 z"
         id="path10278" /><path
         d="m 46.537054,138.02946 v -4.86906 q 0,-0.52337 -0.01764,-0.87032 -0.01176,-0.35283 -0.0294,-0.62334 h 1.575978 q 0.01764,0.10585 0.04704,0.64686 0.0294,0.53513 0.0294,0.71154 h 0.02352 q 0.241101,-0.67037 0.429278,-0.94088 0.188176,-0.27638 0.446919,-0.40575 0.258743,-0.13526 0.646857,-0.13526 0.317548,0 0.511605,0.0882 v 1.38192 q -0.399875,-0.0882 -0.705662,-0.0882 -0.617454,0 -0.964405,0.49984 -0.34107,0.49984 -0.34107,1.48189 v 3.12255 z"
         id="path10280" /><path
         d="m 52.693955,138.14708 q -0.923241,0 -1.440726,-0.49985 -0.517486,-0.50572 -0.517486,-1.4172 0,-0.98793 0.640977,-1.50542 0.646856,-0.51748 1.870004,-0.52924 l 1.370161,-0.0235 v -0.32343 q 0,-0.62334 -0.21758,-0.92324 -0.217579,-0.30579 -0.711542,-0.30579 -0.45868,0 -0.67626,0.2117 -0.211698,0.20582 -0.264623,0.68802 l -1.722992,-0.0823 q 0.158774,-0.92912 0.846795,-1.40544 0.693901,-0.48221 1.887646,-0.48221 1.205506,0 1.858244,0.59394 0.652737,0.59393 0.652737,1.68771 v 2.31692 q 0,0.53513 0.11761,0.74094 0.123491,0.19994 0.405756,0.19994 0.188177,0 0.364592,-0.0353 v 0.89384 q -0.147013,0.0353 -0.264623,0.0647 -0.11761,0.0294 -0.235221,0.0471 -0.11761,0.0176 -0.252862,0.0294 -0.129371,0.0118 -0.305787,0.0118 -0.623335,0 -0.923241,-0.30579 -0.294026,-0.30578 -0.352831,-0.89972 h -0.03528 q -0.693901,1.25256 -2.093465,1.25256 z m 1.92293,-3.06375 -0.846795,0.0118 q -0.576291,0.0235 -0.817392,0.12937 -0.241101,0.1 -0.370472,0.31167 -0.123491,0.21169 -0.123491,0.56453 0,0.45279 0.205818,0.67625 0.211698,0.21758 0.558649,0.21758 0.388114,0 0.705662,-0.21169 0.323429,-0.2117 0.505725,-0.58218 0.182296,-0.37635 0.182296,-0.79387 z"
         id="path10282" /><path
         d="m 62.043977,138.02946 v -3.56947 q 0,-1.67595 -1.13494,-1.67595 -0.599812,0 -0.970285,0.51749 -0.364592,0.5116 -0.364592,1.31723 v 3.4107 h -1.652426 v -4.93963 q 0,-0.5116 -0.01764,-0.83503 -0.01176,-0.32931 -0.0294,-0.58806 h 1.575979 q 0.01764,0.11173 0.04704,0.59982 0.0294,0.4822 0.0294,0.6645 h 0.02352 q 0.335189,-0.72919 0.840914,-1.0585 0.505724,-0.32931 1.205506,-0.32931 1.011449,0 1.552456,0.62334 0.541008,0.62333 0.541008,1.82296 v 4.03991 z"
         id="path10284" /><path
         d="m 70.641296,136.17122 q 0,0.92324 -0.758587,1.45249 -0.752706,0.52337 -2.087584,0.52337 -1.311355,0 -2.011137,-0.41164 -0.693901,-0.41752 -0.923241,-1.29371 l 1.452488,-0.21758 q 0.123491,0.4528 0.423397,0.64097 0.305787,0.18818 1.058493,0.18818 0.693901,0 1.011449,-0.17642 0.317548,-0.17641 0.317548,-0.55277 0,-0.30578 -0.258743,-0.4822 -0.252862,-0.18229 -0.864436,-0.30578 -1.399563,-0.27639 -1.887646,-0.51161 -0.488083,-0.2411 -0.746826,-0.61745 -0.252862,-0.38224 -0.252862,-0.93501 0,-0.91148 0.699782,-1.4172 0.705662,-0.51161 1.993495,-0.51161 1.13494,0 1.822961,0.44104 0.693901,0.44104 0.864436,1.27608 l -1.464249,0.15289 q -0.07057,-0.38812 -0.346951,-0.57629 -0.276384,-0.19406 -0.876197,-0.19406 -0.588052,0 -0.882077,0.15289 -0.294026,0.14702 -0.294026,0.49985 0,0.27638 0.223459,0.44104 0.229341,0.15877 0.764468,0.26462 0.746825,0.15289 1.323116,0.31755 0.582171,0.15877 0.929122,0.38223 0.352831,0.22346 0.558649,0.57629 0.211699,0.34695 0.211699,0.89384 z"
         id="path10286" /><path
         d="m 77.997824,134.8187 q 0,1.59362 -0.640977,2.46394 -0.635095,0.86444 -1.799438,0.86444 -0.670379,0 -1.170223,-0.28815 -0.493963,-0.29403 -0.758587,-0.84091 h -0.03528 q 0.03528,0.17641 0.03528,1.07025 v 2.44041 h -1.652425 v -7.39769 q 0,-0.89972 -0.04704,-1.46425 h 1.605381 q 0.0294,0.10585 0.04704,0.41752 0.02352,0.31167 0.02352,0.61746 h 0.02352 q 0.55865,-1.17023 2.034659,-1.17023 1.111418,0 1.722992,0.85856 0.611574,0.85267 0.611574,2.42865 z m -1.722992,0 q 0,-2.14051 -1.311355,-2.14051 -0.658618,0 -1.011449,0.57629 -0.346951,0.5763 -0.346951,1.61127 0,1.02909 0.346951,1.59362 0.352831,0.55865 0.999688,0.55865 1.323116,0 1.323116,-2.19932 z"
         id="path10288" /><path
         d="m 85.377871,134.84222 q 0,1.54658 -0.858555,2.42866 -0.858556,0.8762 -2.375729,0.8762 -1.487771,0 -2.334566,-0.88208 -0.846794,-0.88208 -0.846794,-2.42278 0,-1.53481 0.846794,-2.41101 0.846795,-0.88208 2.369849,-0.88208 1.558337,0 2.375729,0.85268 0.823272,0.84679 0.823272,2.44041 z m -1.728872,0 q 0,-1.13494 -0.370472,-1.64654 -0.370473,-0.51161 -1.076135,-0.51161 -1.505413,0 -1.505413,2.15815 0,1.06438 0.364593,1.62303 0.370472,0.55277 1.064373,0.55277 1.523054,0 1.523054,-2.1758 z"
         id="path10290" /><path
         d="m 86.689225,138.02946 v -4.86906 q 0,-0.52337 -0.01764,-0.87032 -0.01176,-0.35283 -0.0294,-0.62334 h 1.575978 q 0.01764,0.10585 0.04704,0.64686 0.0294,0.53513 0.0294,0.71154 h 0.02352 q 0.241101,-0.67037 0.429278,-0.94088 0.188177,-0.27638 0.446919,-0.40575 0.258743,-0.13526 0.646857,-0.13526 0.317548,0 0.511605,0.0882 v 1.38192 q -0.399875,-0.0882 -0.705662,-0.0882 -0.617454,0 -0.964405,0.49984 -0.34107,0.49984 -0.34107,1.48189 v 3.12255 z"
         id="path10292" /><path
         d="m 93.004903,138.13531 q -0.729184,0 -1.123178,-0.39399 -0.393995,-0.39988 -0.393995,-1.20551 v -3.75177 h -0.805631 v -1.1173 h 0.887958 l 0.517486,-1.49365 h 1.034971 v 1.49365 h 1.205506 v 1.1173 h -1.205506 v 3.30485 q 0,0.46456 0.176415,0.68802 0.176416,0.21758 0.546888,0.21758 0.194057,0 0.552769,-0.0823 v 1.02321 q -0.611574,0.19993 -1.393683,0.19993 z"
         id="path10294" /><path
         d="m 96.856643,138.14708 q -0.923242,0 -1.440727,-0.49985 -0.517486,-0.50572 -0.517486,-1.4172 0,-0.98793 0.640977,-1.50542 0.646857,-0.51748 1.870004,-0.52924 l 1.370161,-0.0235 v -0.32343 q 0,-0.62334 -0.217579,-0.92324 -0.217579,-0.30579 -0.711543,-0.30579 -0.45868,0 -0.676259,0.2117 -0.211699,0.20582 -0.264624,0.68802 l -1.722991,-0.0823 q 0.158774,-0.92912 0.846794,-1.40544 0.693901,-0.48221 1.887646,-0.48221 1.205506,0 1.858244,0.59394 0.65274,0.59393 0.65274,1.68771 v 2.31692 q 0,0.53513 0.11761,0.74094 0.12349,0.19994 0.40575,0.19994 0.18818,0 0.3646,-0.0353 v 0.89384 q -0.14702,0.0353 -0.26463,0.0647 -0.11761,0.0294 -0.23522,0.0471 -0.11761,0.0176 -0.25286,0.0294 -0.12937,0.0118 -0.30579,0.0118 -0.623333,0 -0.923239,-0.30579 -0.294026,-0.30578 -0.352831,-0.89972 h -0.03528 q -0.693901,1.25256 -2.093464,1.25256 z m 1.922929,-3.06375 -0.846795,0.0118 q -0.57629,0.0235 -0.817392,0.12937 -0.241101,0.1 -0.370472,0.31167 -0.123491,0.21169 -0.123491,0.56453 0,0.45279 0.205818,0.67625 0.211699,0.21758 0.558649,0.21758 0.388114,0 0.705662,-0.21169 0.323429,-0.2117 0.505725,-0.58218 0.182296,-0.37635 0.182296,-0.79387 z"
         id="path10296" /><path
         d="m 103.71332,138.13531 q -0.72918,0 -1.12318,-0.39399 -0.39399,-0.39988 -0.39399,-1.20551 v -3.75177 h -0.80563 v -1.1173 h 0.88796 l 0.51748,-1.49365 h 1.03497 v 1.49365 h 1.20551 v 1.1173 h -1.20551 v 3.30485 q 0,0.46456 0.17642,0.68802 0.17641,0.21758 0.54689,0.21758 0.19405,0 0.55277,-0.0823 v 1.02321 q -0.61158,0.19993 -1.39369,0.19993 z"
         id="path10298" /><path
         d="m 106.09493,130.52004 v -1.21726 h 1.65243 v 1.21726 z m 0,7.50942 v -6.36272 h 1.65243 v 6.36272 z"
         id="path10300" /><path
         d="m 115.48612,134.84222 q 0,1.54658 -0.85855,2.42866 -0.85856,0.8762 -2.37573,0.8762 -1.48777,0 -2.33457,-0.88208 -0.84679,-0.88208 -0.84679,-2.42278 0,-1.53481 0.84679,-2.41101 0.8468,-0.88208 2.36985,-0.88208 1.55834,0 2.37573,0.85268 0.82327,0.84679 0.82327,2.44041 z m -1.72887,0 q 0,-1.13494 -0.37047,-1.64654 -0.37048,-0.51161 -1.07614,-0.51161 -1.50541,0 -1.50541,2.15815 0,1.06438 0.36459,1.62303 0.37047,0.55277 1.06437,0.55277 1.52306,0 1.52306,-2.1758 z"
         id="path10302" /><path
         d="m 120.91972,138.02946 v -3.56947 q 0,-1.67595 -1.13494,-1.67595 -0.59981,0 -0.97028,0.51749 -0.3646,0.5116 -0.3646,1.31723 v 3.4107 h -1.65242 v -4.93963 q 0,-0.5116 -0.0176,-0.83503 -0.0118,-0.32931 -0.0294,-0.58806 h 1.57598 q 0.0176,0.11173 0.047,0.59982 0.0294,0.4822 0.0294,0.6645 h 0.0235 q 0.33519,-0.72919 0.84092,-1.0585 0.50572,-0.32931 1.2055,-0.32931 1.01145,0 1.55246,0.62334 0.54101,0.62333 0.54101,1.82296 v 4.03991 z"
         id="path10304" /></g></g></svg>

 

Here's the Arcade (using sample data and a basic Decode for testing; swap in your expression):

var icon = Decode(
  $datapoint['theminute'] % 3,
  0, 'red',
  1, 'yellow',
  2, 'green',
  'error'
)


return {
  iconName: icon,
  middleText: '',
  middleTextMaxSize: 'x-large'
}

 

And the result: