EB List Icon Advanced Formatting not accepting color

amarcz_cc

Hello,

I am attempting to color the 'symbol / icon' on my List to correspond to a specific color, yet the iconColor variable is not accepting the color value of 'icon_color'.

 

var icon_color = decode($datapoint.projtype,
  'Facilities', '#AB6629',
  'Maintenance', '#A73599',
  'Parks', '#30A625',
  'Street Improvements', '#314AA7',
  'Traffic Signals', '#813643',
  'Transportation', '#728238',
  'Other', '#828282', 'white',
);

return {
  textColor: '',
  //backgroundColor: icon_color,
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  iconColor: icon_color,
  //attributes: {
        // attribute2: ''
   // }
}

 

 

 

JA7

The icons in the list come directly from your layer symbology. You can't change them using Arcade. You can however, turn off the icons and recreate them using Advanced Formatting and HTML.

var icon_color = decode($datapoint.INCIDENT_TYPE,
  'Snow', '#AB6629',
  'Hail', '#A73599',
  'Flood', '#30A625',
  'Flash Flood', '#314AA7',
  'Other', '#828282', 'white',
);

var icon = Concatenate('<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="' + icon_color + '" viewBox="0 0 256 256"><path d="M224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48Z"></path></svg>')


return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  attributes: {
    icon: icon
  }
}

 

In the line item template, click the source button and add the HTML.

<div style="align-items:center;display:flex;">
    <p>
        {expression/icon}
    </p>
    <p>
        {field/INCIDENT_TYPE}
    </p>
</div>