PopupTemplate actions doesn't display icons

Question

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.

JeffreyThompson2 · Answer

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

1. Use `props.context.folderUrl` to load a large image from a URL. The image must be put in the assets folder because the assets folder will be copied to the dist directory on compile.

I have had good results with this first method.