Issue with Displaying Icons in Custom UI Application


I am currently encountering an issue with a custom UI application where the icons are not being displayed as intended. I have followed the instructions outlined here, where it indicates specifying a resource in the manifest.yml.

I’ve tried two different approaches to resolve this issue:

  1. First, I set the build folder as the root (consistent with the documentation) and specified the icons folder using icon: resource:main;icons/write.png.

  2. In my second approach, I pointed to the icons folder as the root and specified it using icon: resource:icons;write.png.

Despite trying both methods, the icons still do not appear in the UI. I also attempted using .svg files, but to no avail.

Here is a snapshot of my folder structure for reference:

And here are my specified resources in manifest.yml:

Has anyone else experienced this issue or have any suggestions on how to rectify it? Any advice or insights would be greatly appreciated!

From the picture, it looks like the icons folder is under build but is listed under public in resources. Is that intentional?


Oh my mistake. Sorry about that :sweat_smile: Actually this screenshot is from my last attempt. I had already tried customui/build/icons just before I took this screenshot. As a last hope I tried to give the actual location of the image in the project instead of the build folder. I’m glad you pointed that out, thanks.

Well, it works for me with this configuration:

    - key: example
      resource: example
      title: Example
      render: native
      route: example
      icon: resource:icons-test;example.svg
        function: resolver
  - key: icons-test
    path: customui/build/icons

Then the icon appears when I click Apps on my site.

1 Like

Hi Aaron, when I tried your configuration it worked for me too. But, I noticed that I was trying to use this feature for subpages in project page. Here is my last manifest.yml file and result;



As you can see, it does not work when you specified the same icon for the subpage. Can you try that too?

Ah, I see. I tried it out and get the result there.

The problem is that resources aren’t accepted for icons for subpages. It’s not called out clearly in the documentation, but the definition of the icon property for sub pages is this: “The URL of the icon.” It only accepts icons hosted elsewhere.

You can see this in the built page (note the src:

<img src="resource:icons;example.svg" class="_1bsbgktf _4t3igktf">
1 Like

Hi Aaron,
Thank you for the clarification and for taking the time to help resolve this!

1 Like