# Adding an icon to a button

**URL:** <https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012>\
**Category:** Development\
**Created:** [September 6, 2017, 2:56pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012 "2017-09-06T14:56:54Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![mschumaker](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/mschumaker/32/1395_2.png) [@mschumaker](https://discourse.slicer.org/u/mschumaker)\
**Post date:** [September 6, 2017, 2:56pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/1 "2017-09-06T14:56:54Z")

</div>

I’ve tried a number of things to add a resource and use an icon with a button. I’ve noticed I can access Slicer resources, but not ones in the Resources folder of my module. I’d like to do the following, hopefully with a relative path as opposed to absolute, with the icon file in the Resources/Icons directory of my module:

```
    loadSSFPIcon = qt.QIcon(":/Icons/SSFPicon.png")
    self.LoadSSFPButton = qt.QPushButton("Load SSFP Image Series")
    self.LoadSSFPButton.setIcon(loadSSFPIcon)
    self.layout.addWidget(self.LoadSSFPButton)

```

How do I accomplish this?

---

<div class="post-metadata">

**Author:** ![cpinter](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/cpinter/32/7995_2.png) [@cpinter](https://discourse.slicer.org/u/cpinter)\
**Post date:** [September 6, 2017, 3:08pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/2 "2017-09-06T15:08:56Z")

</div>

You can do this:

iconPath = os.path.join(os.path.dirname(self.parent.path), ‘Resources/Icons’, ‘SSFPicon.png’)  
icon = qt.QIcon(iconPath)

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 6, 2017, 3:55pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/3 "2017-09-06T15:55:06Z")

</div>

2 posts were split to a new topic: [Landmark registration for registering models](https://discourse.slicer.org/t/landmark-registration-for-registering-models/1013)

---

<div class="post-metadata">

**Author:** ![mschumaker](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/mschumaker/32/1395_2.png) [@mschumaker](https://discourse.slicer.org/u/mschumaker)\
**Post date:** [September 6, 2017, 4:19pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/4 "2017-09-06T16:19:31Z")

</div>

Thanks, I can see where you’re going with this, though when I tried it, self.parent.path was not recognized. What am I missing?

---

<div class="post-metadata">

**Author:** ![mschumaker](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/mschumaker/32/1395_2.png) [@mschumaker](https://discourse.slicer.org/u/mschumaker)\
**Post date:** [September 6, 2017, 4:38pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/5 "2017-09-06T16:38:13Z")

</div>

I think part of the problem is that I’m trying to use it from the Widget class. I’m looking at [ScriptedLoadableModule.py](http://ScriptedLoadableModule.py) and I see that self.parent.path works from the module class.

---

<div class="post-metadata">

**Author:** ![mschumaker](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/mschumaker/32/1395_2.png) [@mschumaker](https://discourse.slicer.org/u/mschumaker)\
**Post date:** [September 6, 2017, 5:10pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/6 "2017-09-06T17:10:27Z")

</div>

I’m currently trying the following, but the image still does not show in the button:

```
    moduleDir = os.path.dirname(slicer.util.modulePath(self. __module__ ))
    iconPath = os.path.join(moduleDir, 'Resources/Icons', 'SSFPicon.png')
    icon = qt.QIcon(iconPath)

```

Is there something else missing?  
Thanks.

---

<div class="post-metadata">

**Author:** ![cpinter](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/cpinter/32/7995_2.png) [@cpinter](https://discourse.slicer.org/u/cpinter)\
**Post date:** [September 6, 2017, 6:16pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/7 "2017-09-06T18:16:20Z")

</div>

Did you verify that the path actually points to the image? For example you need to install the image file to the build directory as well. A working example:  
[https://app.assembla.com/spaces/slicerrt/subversion/source/HEAD/trunk/GelDosimetryAnalysis/src/GelDosimetryAnalysis/GelDosimetryAnalysis.py#ln2322](https://app.assembla.com/spaces/slicerrt/subversion/source/HEAD/trunk/GelDosimetryAnalysis/src/GelDosimetryAnalysis/GelDosimetryAnalysis.py#ln2322)  
with the relevant CMake line  
[https://app.assembla.com/spaces/slicerrt/subversion/source/HEAD/trunk/GelDosimetryAnalysis/src/GelDosimetryAnalysis/CMakeLists.txt#ln19](https://app.assembla.com/spaces/slicerrt/subversion/source/HEAD/trunk/GelDosimetryAnalysis/src/GelDosimetryAnalysis/CMakeLists.txt#ln19)

---

<div class="post-metadata">

**Author:** ![mschumaker](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/mschumaker/32/1395_2.png) [@mschumaker](https://discourse.slicer.org/u/mschumaker)\
**Post date:** [September 6, 2017, 7:52pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/8 "2017-09-06T19:52:35Z")

</div>

I’ve checked the value of iconPath, and it points to the image. What build directory do you mean?  
I’ve looked at the code you referenced, and what I have is consistent. A possible difference may be that I’m using an additional image, rather than the one that was defined when the module was created. Do I need a .qrc file, or something else to add new files?

---

<div class="post-metadata">

**Author:** ![cpinter](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/cpinter/32/7995_2.png) [@cpinter](https://discourse.slicer.org/u/cpinter)\
**Post date:** [September 6, 2017, 8:09pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/9 "2017-09-06T20:09:12Z")

</div>

I said all I know. Please try to work with this example and see what is in it that is not present in your module. One of those differences will be what causes your image not to show up. The qrc file is a good starting point.

---

<div class="post-metadata">

**Author:** ![mschumaker](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/mschumaker/32/1395_2.png) [@mschumaker](https://discourse.slicer.org/u/mschumaker)\
**Post date:** [September 6, 2017, 8:39pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/10 "2017-09-06T20:39:09Z")

</div>

Ok. Thanks for trying. If you think of anything else, let me know.

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 6, 2017, 10:35pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/11 "2017-09-06T22:35:55Z")

</div>

There are many examples for using custom icons in widget classes. For example: [https://github.com/SlicerIGT/SlicerIGT/blob/b05132759b32ae3a2d3e52e9897dd28f7a39677d/PlusRemote/PlusRemote.py#L55](https://github.com/SlicerIGT/SlicerIGT/blob/b05132759b32ae3a2d3e52e9897dd28f7a39677d/PlusRemote/PlusRemote.py#L55)

Using qrc file is a bit more complicated, because you need to compile resources and for that probably you need to build Slicer and your module.

---

<div class="post-metadata">

**Author:** ![cpinter](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/cpinter/32/7995_2.png) [@cpinter](https://discourse.slicer.org/u/cpinter)\
**Post date:** [September 6, 2017, 10:49pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/12 "2017-09-06T22:49:43Z")

</div>

Yes, this is basically the same method. What you’ll need to make sure is that the icon file is properly deployed with your module.

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 6, 2017, 10:51pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/13 "2017-09-06T22:51:12Z")

</div>

Yes, there are just slight differences in how to retrieve resource directory path from various classes.

---

<div class="post-metadata">

**Author:** ![jcfr](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/jcfr/32/17825_2.png) [@jcfr](https://discourse.slicer.org/u/jcfr)\
**Post date:** [September 7, 2017, 3:00pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/14 "2017-09-07T15:00:38Z")

</div>

From scripted module, there is also support for handling `qrc` files:

> <https://github.com/Slicer/Slicer/blob/adf9e547646d38f2bf93e6d456bc715974e467cf/Modules/Scripted/ExtensionWizard/CMakeLists.txt#L18-L27>

This will generate a `<NameOfFile>Resources` python module that can be imported:

```auto
from . import ExtensionWizardResources as Resources

```

See [here](https://github.com/Slicer/Slicer/blob/adf9e547646d38f2bf93e6d456bc715974e467cf/Modules/Scripted/ExtensionWizard/ExtensionWizardLib/ __init__.py#L1) for more details

Then, the corresponding resources can be used as usual:

> <https://github.com/Slicer/Slicer/blob/adf9e547646d38f2bf93e6d456bc715974e467cf/Modules/Scripted/ExtensionWizard/ExtensionWizard.py#L33-L34>

---

<div class="post-metadata">

**Author:** ![mschumaker](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/mschumaker/32/1395_2.png) [@mschumaker](https://discourse.slicer.org/u/mschumaker)\
**Post date:** [September 7, 2017, 4:59pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/15 "2017-09-07T16:59:10Z")

</div>

Thanks very much everyone. I currently have it working with this in the CMakeLists.txt:

```
set(MODULE_PYTHON_RESOURCES
  Resources/Icons/${MODULE_NAME}.png
  Resources/Icons/SSFPIcon.png
  )

```

And this in my module Widget class:

```
    moduleDir = os.path.dirname(slicer.util.modulePath(self. __module__ ))
    SSFPIconPath = os.path.join(moduleDir, 'Resources/Icons', 'SSFPIcon.png')
    loadSSFPIcon = qt.QIcon(SSFPIconPath)
    self.LoadSSFPButton = qt.QPushButton(" Load SSFP Image Series")
    self.LoadSSFPButton.setIcon(loadSSFPIcon)
    self.layout.addWidget(self.LoadSSFPButton)
```

---

<div class="post-metadata">

**Author:** ![mschumaker](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/mschumaker/32/1395_2.png) [@mschumaker](https://discourse.slicer.org/u/mschumaker)\
**Post date:** [September 7, 2017, 5:03pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/16 "2017-09-07T17:03:30Z")

</div>

Thanks, Jean Christophe. I tried to follow this, but ran in to difficulty. Possibly with the qrc file prefix, or location. Since I was able to get it working the other way, I’ll carry on with it for now.  
Thanks again.

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [September 7, 2017, 5:19pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/17 "2017-09-07T17:19:57Z")

</div>

The complexity with using qrc files is that you need to compile resources into a qrc file. That requires building of Slicer (or manual compilation).

---

<div class="post-metadata">

**Author:** ![che85](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/che85/32/636_2.png) [@che85](https://discourse.slicer.org/u/che85)\
**Post date:** [February 15, 2018, 8:19pm UTC](https://discourse.slicer.org/t/adding-an-icon-to-a-button/1012/18 "2018-02-15T20:19:52Z")

</div>

@jcfr I tried handling qrc in my own project, but I am failing when bulding the project.

Out of curiosity I copied the ExtensionWizard to my local project and added that subdirectory to my CMakeLists.txt.

```auto
christian@christians-mbp ~/D/S4R> gcc --version
Configured with: --prefix=/Applications/Xcode.app/Contents/Developer/usr --with-gxx-include-dir=/usr/include/c++/4.2.1
Apple LLVM version 9.0.0 (clang-900.0.39.2)
Target: x86_64-apple-darwin17.4.0
Thread model: posix
InstalledDir: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin

```

The output that I am getting looks as follows:

```auto
[5%] Built target ConfigureAdditionalLauncherSettings
[11%] Copying python Script: ExtensionWizard.py
[16%] Copying python Script: ExtensionWizardLib/ __init__.py
[22%] Copying python Script: ExtensionWizardLib/CreateComponentDialog.py
[27%] Copying python Script: ExtensionWizardLib/DirectoryListWidget.py
[33%] Copying python Script: ExtensionWizardLib/EditableTreeWidget.py
[38%] Copying python Script: ExtensionWizardLib/EditExtensionMetadataDialog.py
[44%] Copying python Script: ExtensionWizardLib/LoadModulesDialog.py
[50%] Copying python Script: ExtensionWizardLib/ModuleInfo.py
[55%] Copying python Script: ExtensionWizardLib/SettingsPanel.py
[61%] Copying python Script: ExtensionWizardLib/TemplatePathUtilities.py
make[2]: *** No rule to make target `/Utilities/Scripts/qrcc.py', needed by `ExtensionWizard/ExtensionWizardLib/ExtensionWizardResources.py'. Stop.
make[1]: *** [ExtensionWizard/CMakeFiles/CopyExtensionWizardPythonScriptFiles.dir/all] Error 2
make: *** [all] Error 2

```

with running `make -d` [https://gist.github.com/che85/1bff5a003b53e477a7ef403c7c3f7991](https://gist.github.com/che85/1bff5a003b53e477a7ef403c7c3f7991)

By any chance, do you have an idea what why that doesn’t work locally?

Thanks  
Christian