Select to view content in your preferred language

PopupTemplate actions doesn't display icons

459
1
10-26-2023 06:13 AM
ŁukaszWiszniewski
Emerging Contributor

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.

 

0 Kudos
1 Reply
JeffreyThompson2
MVP Regular Contributor

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.

GIS Developer
City of Arlington, Texas
0 Kudos