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.
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.