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!

[IB3]

Thanks! I had also managed to do something similar in the meantime,  but the svg code gets too heavy. Maybe it's better to save it in a field/url?

[jcarlson]

You may run into issues with the field value being interpreted as a string, rather than raw HTML. How large are the SVGs you're trying to add? Is it worth the trouble to try and simplify the SVG with something like Inkscape?