Display Different SVG Icons in Dashboards LIST Based on Field Values

IB3

Hi everyone,

I'm working on a dashboard where I need to display in a list different SVG icons depending on the value of a field. For example:

• If the field thema = "Energie," I want to display Icon1.svg.
• If thema = "Water," then display Icon2.svg, and so on.

I have 8 different themes in total, each requiring its own icon.

I’ve tried using Arcade to add the SVG code directly into a variable, but it didn’t work as expected. I was considering storing the SVG code in a field, but I’m unsure of the best approach to dynamically change the icon displayed in the list widget based on the field value.

Has anyone successfully implemented this? Any tips or example code would be really appreciated!

Thanks in advance!

jcarlson

This is something we do, it's possible. Adding the SVG into a variable is possible. Here's what our Advanced Formatting Arcade looks like:

var assigned = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12,15C7.58,15 4,16.79 4,19V21H20V19C20,16.79 16.42,15 12,15M8,9A4,4 0 0,0 12,13A4,4 0 0,0 16,9M11.5,2C11.2,2 11,2.21 11,2.5V5.5H10V3C10,3 7.75,3.86 7.75,6.75C7.75,6.75 7,6.89 7,8H17C16.95,6.89 16.25,6.75 16.25,6.75C16.25,3.86 14,3 14,3V5.5H13V2.5C13,2.21 12.81,2 12.5,2H11.5Z" />
</svg>`

var in_progress = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M13.53 22H10C9.75 22 9.54 21.82 9.5 21.58L9.13 18.93C8.5 18.68 7.96 18.34 7.44 17.94L4.95 18.95C4.73 19.03 4.46 18.95 4.34 18.73L2.34 15.27C2.21 15.05 2.27 14.78 2.46 14.63L4.57 12.97C4.53 12.65 4.5 12.33 4.5 12S4.53 11.34 4.57 11L2.46 9.37C2.27 9.22 2.21 8.95 2.34 8.73L4.34 5.27C4.46 5.05 4.73 4.96 4.95 5.05L7.44 6.05C7.96 5.66 8.5 5.32 9.13 5.07L9.5 2.42C9.54 2.18 9.75 2 10 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.78 8.95 21.73 9.22 21.54 9.37L19.43 11C19.47 11.34 19.5 11.67 19.5 12V12.19C19 12.07 18.5 12 18 12C17.08 12 16.22 12.21 15.44 12.58C15.47 12.39 15.5 12.2 15.5 12C15.5 10.07 13.93 8.5 12 8.5S8.5 10.07 8.5 12 10.07 15.5 12 15.5C12.2 15.5 12.39 15.47 12.58 15.44C12.21 16.22 12 17.08 12 18C12 19.54 12.58 20.94 13.53 22M16 15V21L21 18L16 15Z" />
</svg>`

var unassigned = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8C16,9.95 14.6,11.58 12.75,11.93L8.07,7.25C8.42,5.4 10.05,4 12,4M12.28,14L18.28,20L20,21.72L18.73,23L15.73,20H4V18C4,16.16 6.5,14.61 9.87,14.14L2.78,7.05L4.05,5.78L12.28,14M20,18V19.18L15.14,14.32C18,14.93 20,16.35 20,18Z" />
</svg>`

var svg = Decode(
    DomainName($datapoint,"risk_category"),
    'High', assigned,
    'Medium', in_progress,
    'Low', unassigned,
    'no value'
)

return {
    attributes: {
        svg: svg
    }
}

And the list item template:

{expression/svg} {est_name}

And the result:

You can mess with the SVG attributes, too. Or have those based on *other* feature attributes!