Hello, I'm following the community samples and am trying to change the icon for my add in button. Its not working however, even though I have two buttons (one 16x16, other 32x32 like in the samples). They are present in both Images and Dark Images folders too, incase that mattered. They just dont load. The line in the DAML file However I also use the same images for a window icon elsewhere, and it works perfectly. I've even tried the EvilGenius16/32.png from the samples and still no luck. Meanwhile the GenericButton16/32 png's do work. I cannot find any reference to the Generic buttons anywhere in the entire project though, so I don't know if I'm missing a resource loading step or something.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to correctly load an icon for a button

DrewD

Hello,

I'm following the community samples and am trying to change the icon for my add in button. Its not working however, even though I have two buttons (one 16x16, other 32x32 like in the samples). They are present in both Images and Dark Images folders too, incase that mattered. They just dont load.

The line in the DAML file

<button........ smallImage="Images\tree16.png" largeImage="Images\tree32.png">

However I also use the same images for a window icon elsewhere, and it works perfectly. I've even tried the EvilGenius16/32.png from the samples and still no luck. Meanwhile the GenericButton16/32 png's do work. I cannot find any reference to the Generic buttons anywhere in the entire project though, so I don't know if I'm missing a resource loading step or something.

Find more posts tagged with

Accepted answers

BarbaraSchneider2

Hello Charles,

thank you for your answer. It now works! The following confused me: when you create a new add-in, and create a new button, the images "GenericButtonBlue16" and GenericButtonBlue32" are created in the folder "Images" of the project. However, these images are not used by the Add-In, but the ones in "ArcGIS.Desktop.Resources". This is confusing.

I had to reference my images the following way to make things work (not "pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/Image32.png"):

<!-- Note the backslash -->
<button id="module1_Button1" className="Button1" caption="Button1" largeImage="Images\Image32.png"/>

Wolf

Hi Drew,

If you want to add an image for your add-in buttons you have to change the 'Build Action' for each image to 'AddInContent'. You can do that through the image property pane in your solution as shown here: ProGuide-Diagnosing-ArcGIS-Pro-Add-ins

All comments

CarlMagagnosc1

A couple of things I discovered in working through this issue:

The (simplified) syntax for the pack URI here appears to be
"pack://application:,,,/<project name>;component/Images/<image file name>.png"
I'm obviously no URI expert, as it took me some time to find that <project name> needed to be the name used for the project. So if I named my project CustomButton and the image I want to use is cusbut32.png, my pack URI is
"pack://application:,,,/CustomButton;component/Images/cusbut32.png"
I was confused by the use of "Module1" for <project name> in some of the documentation.
The above doesn't work if you have a space in the project name, e.g. if I had named my project
Custom Button, I'd have a space in the pack URI string, and that leads to unexpected results. There's probably a way around this, but for now I'm making my project names all_one_word.
Visual Studio (version 17.11.4) doesn't appear to recognize that changes to config.daml require a rebuild. Again, there's probably some dependency that should be enabled, but I haven't figured it out; it may be in ESRI's ArcGIS Pro Module Addin template. For now I just use Build>Rebuild instead of Build>Build (or Ctrl-Shift-B).

Thanks to everyone else who has contributed here!

Wolf

I think this ProGuide explains the issue: ProGuide Content and Image Resources · Esri/arcgis-pro-sdk Wiki (github.com)

There is a difference when referencing images from DAML versus referencing images from XAML. The previous posts were DAML references, your example is XAML.

So, when you tried to apply the DAML solution to your XAML it didn't work, because the references and build actions are different for DAML and XAML.

Wolf

Sorry for the delay but as of ArcGIS Pro 3.0 the build action 'AddInContent' is obsolete. ProGuide Content and Image Resources · Esri/arcgis-pro-sdk Wiki (github.com)

The replacement is build action 'Content'

MaxwellS

I'm chiming in with a potential solution for anyone else who had issues with getting the button show up after trying all of the previously mentioned solutions (I was trying them all to no avail). I set the BuildAction of my image in Visual Studio 2022 to Resource, and named the button's large image as follows:

<Button ...
largeImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/MyButton32.png">‍‍‍‍‍

Note, rather than using "/MyAddin" as shown here:

"pack://application:,,,/MyAddin;component/Images/MyImage32.png"

I used "/ArcGIS.Desktop.Resources". Not sure if this will work for anyone else, but I found none of the previously mentioned solutions working for me until I tried this. Hope this helps in some way.

Amadeus111

@Wolf I am working with VS2022 and AGP 3.0.3. I dont see AddInContent as an option in Build Actions. Am I missing something here?

AlderMaps

Thank you! This drove me batty for an hour! I was going to work on my tool and thought "I'll just change the button real quick..." Hour and a half later, found myself on this page, where I finally got everything working.

BarbaraSchneider2

Hello Charles,

I had to reference my images the following way to make things work (not "pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/Image32.png"):

<!-- Note the backslash -->
<button id="module1_Button1" className="Button1" caption="Button1" largeImage="Images\Image32.png"/>

CharlesMacleod

Barbara, this might help:

https://github.com/esri/arcgis-pro-sdk/wiki/ProGuide-content-and-image-resources

It covers the various options for referencing images in your add-in. Pay close attention to the "image" Uri syntax - in particular the "/" - is it forwards or backwards "\"...? Notice for AddinContent it is backwards "\"....

One option that is not in that guide, but, seeing your post, I will add it, is to use something called a pack Uri. (cm - actually, on review, there is a section there called Referencing images from Arcgis Pro but I will expand it). A pack Uri is a way of referencing content that is contained, as a resource, ~within~ an assembly. A pack Uri looks like this

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Button</SPAN> <SPAN class="attr-name token">...</SPAN>
 <SPAN class="attr-name token">largeImage</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/GenericButtonBlue32.png<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

(and is a bit unfriendly). If you choose to use a pack Uri from your ~own~ add-in (notice how this one references "ArcGIS.Desktop.Resources" which is the Pro assembly that contains all of the Pro icons) you would do the following:

Add the image to your add-in project. Assume you add it to the folder called "Images".
In Visual Studio, on the image properties, set its "Build Action" to Resource
Change the pack Uri as follows - let's make an assumption that your add-in assembly is called "MyAddin.dll" and the image you added was called "MyImage32.png" and was added into the add-in Images folder:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>Button</SPAN> <SPAN class="attr-name token">...</SPAN> 
   <SPAN class="attr-name token">largeImage</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>pack://application:,,,/MyAddin;component/Images/MyImage32.png<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

One final point: After following these instructions your image may still not show (eg on the button). Why? Well, let's assume that the issue is not syntax, the issue is not incorrect Build Action or path or other user error. Everything is exactly correct but the image still does not show....

The answer is because of delay loading. Add-ins, by default, are delay loaded. This means that they do not actually ~load~ until a user activates them - usually by clicking on a button that is contained within the add-in. At that point in time, and only at that point in time, does the add-in assembly load. Delay loading is done as an optimization technique to only load those assemblies as they are needed....on demand, so to speak....and not all at once at startup. What this means for you is that the image you added as a Resource into your add-in assembly will not have been loaded (until the add-in is loaded) when the Pro ribbon is shown - In other words, you can "see" your button (sans image) but the add-in behind it is, in fact, not loaded and so neither are any of its resources - to include the button image!!!. Alright, well great....but I still need to know how do I get my image loaded and shown on the button on the ribbon!

You have three options:

Force your add-in to load at Pro initialization. In that case your add-in assembly will be loaded and the image will be immediately available. To do this set the module "autoLoad" property in your Config.daml to "true" (it is false by default).
Reference an image in a dll that is loaded at start-up (such as the images found in ArcGIS.Desktop.Resources.dll) - Notice that this is what the Pro SDK Item templates do - by default all images are referenced from the Pro resources dll.
Use AddinContent as the Image "Build Action". AddinContent is a custom build action specifically designed to deal with the delay loading characteristics of add-ins and is installed with the Pro SDK. In a nutshell, if you use "AddinContent ", the image will be referenced from within the add-in zip archive and not from within the assembly. In other words, Pro does not have to load the assembly to access the images built as "AddinContent". Note that the path separators for the image path point backwards "\". The downside with AddinContent is that Images with that build action type, because they live in the zip archive and not in the dll as resources, can only by referenced in the Config.daml and not in a WPF User Control, for example (via a pack Uri). It is a custom content type (we, "Esri" implemented to support delay loading) and is not a WPF resource type.

Again, consult https://github.com/esri/arcgis-pro-sdk/wiki/ProGuide-content-and-image-resourcesfor more information and I will update that document to cover provide more details on use of pack Uris in the Config.daml.

BarbaraSchneider2

I have exactly the same problem. I set the "Build Action" for each image to "AddInContent", but the images still don't display. What am I doing wrong?

DrewD

Thanks Wolf. I had previously thought build action was done in code but couldn't find it, that makes far more sense.

Wolf

Hi Drew,

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.