topic Re: PopupTemplate actions doesn't display icons in ArcGIS Experience Builder Questions

PopupTemplate actions doesn't display icons

ŁukaszWiszniewski — Thu, 26 Oct 2023 13:13:18 GMT

Hello,
I have created a custom PopupTemplate with actions. I add actions like :

import {ArrowLeft} from '../images/ArrowLeft.png'; import { arrowLeft16 } from "@esri/calcite-ui-icons {...} actions: [ { id: "display-item", icon: {arrowLeft16}, title: "Display item" }, { id: "display-layer", icon: {ArrowLeft}, title: "Add layer" } ],

I have trouble with icon visibility. I tried to add local PNG file as an icon, and second way by esri icons library (npm install @esri/calcite-ui-icons --save). None of these approaches work. I also tried to use "image" instead of "icon" attribute's key, but it didn't help.

Re: PopupTemplate actions doesn't display icons

JeffreyThompson2 — Thu, 26 Oct 2023 13:32:36 GMT

The sample widgets library has an example of how to pull in images from your files.

https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/widgets/use-assets

<div className="m-2"> <h4>1. Use <b><code>props.context.folderUrl</code></b> to load a large image from a URL. The image must be put in the <b>assets</b> folder because the <b>assets</b> folder will be copied to the <b>dist</b> directory on compile.</h4> <img style={{ width: '200px', height: '200px' }} src={`${props.context.folderUrl}dist/runtime/assets/large-image.jpg`}/> </div>

I have had good results with this first method.