# Add Image or Icon to a button? **URL:** \ **Category:** Ignition Early Access\ **Created:** [December 18, 2018, 11:26pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483 "2018-12-18T23:26:40Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![john.schlottke](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@john.schlottke](https://forum.inductiveautomation.com/u/john.schlottke)\ **Post date:** [December 18, 2018, 11:26pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/1 "2018-12-18T23:26:40Z")
How would you add an image or icon to a button such as this: ![c382d5ffe97a9eda150337483e38522c12cee2b0](https://us1.discourse-cdn.com/inductiveautomation/original/2X/8/81cc6aab96d5843b4cd3be3393e118783a5a500d.png) We were able to do this with vision, but can’t seem to figure it out with Perspective. Can we also group components? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [December 18, 2018, 11:38pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/2 "2018-12-18T23:38:48Z")
You can add images to Button components in Perspective. I was able to set up the following button: ![4a069dd8a2605a4545a7c92b89a368db8e5f31ec](https://us1.discourse-cdn.com/inductiveautomation/original/2X/0/09caae9a4382e7cefcd4175a638c4497726c4552.png) With the following property settings: ![b251456802081a85640a51c9bd3d51d0d78758b4](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a2e754334ca916daa0317b404ee501a7b2183b9a.png) The rounded corners on your buttons should just be CSS stylings, but I’ll leave that for you. ---
**Author:** ![john.schlottke](https://avatars.discourse-cdn.com/v4/letter/j/58956e/32.png) [@john.schlottke](https://forum.inductiveautomation.com/u/john.schlottke)\ **Post date:** [December 18, 2018, 11:49pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/3 "2018-12-18T23:49:10Z")
Thank you! we were able to adjust the corners. One thing I will point out though is that I tried to edit the background color on all buttons and then once set and applied the corner radius all went back to default. ---
**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\ **Post date:** [January 15, 2019, 6:45pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/4 "2019-01-15T18:45:03Z")
Can someone fix the images in the post? Also, is there a way to be able to bind to an icon rather than an image? It seems silly to have seperate icons overlaid on buttons. ---
**Author:** ![PerryAJ](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/perryaj/32/3281_2.png) [@PerryAJ](https://forum.inductiveautomation.com/u/PerryAJ)\ **Post date:** [January 15, 2019, 10:55pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/5 "2019-01-15T22:55:44Z")
> [@ryanjmclaughlin](#): > > Can someone fix the images in the post? I'm letting our web team know there are image issues and they'll be looking into it. > [@ryanjmclaughlin](#): > > Also, is there a way to be able to bind to an icon rather than an image? It seems silly to have seperate icons overlaid on buttons. What do you mean by 'bind to an icon'? ---
**Author:** ![andrewbrown](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@andrewbrown](https://forum.inductiveautomation.com/u/andrewbrown)\ **Post date:** [January 15, 2019, 11:04pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/6 "2019-01-15T23:04:48Z")
> [@PerryAJ](#): > > What do you mean by ‘bind to an icon’? I think he means why can we not use an icon within properties. i.e. Using "material/{icon}" and have that appear natively within the button. rather than using an image from your image folder. I have the same issue where by I have tried using something like this within the parameters. (and other different structures) but no luck. { "text": "text", "icon": { "path": "material/[icon]" } } ---
**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\ **Post date:** [January 15, 2019, 11:12pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/7 "2019-01-15T23:12:53Z")
> [@PerryAJ](#): > > What do you mean by ‘bind to an icon’? With the icon component it is easy to just set the binding to an icon name, you don’t need the fully qualified path. Also the icons are SVG vs images so it works a lot better then maintaining image files for all the buttons. It seems the button component only allows for images not “icons”. ---
**Author:** ![jspecht](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jspecht/32/6465_2.png) [@jspecht](https://forum.inductiveautomation.com/u/jspecht)\ **Post date:** [January 16, 2019, 1:57am UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/8 "2019-01-16T01:57:58Z")
Buttons do support icons. If you add an `icon` object under the `image` prop, you can supply the icon name and library just like the icon component. Feel free to copy the below json and paste into your view so that you can see for yourself: ```auto [ { "type": "ia.input.button", "version": 0, "props": { "image": { "icon": { "library": "material", "name": "warning" } } }, "meta": { "name": "Button" }, "position": { "height": 47, "width": 133, "x": 246, "y": 203 }, "custom": {} } ] ``` ---
**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\ **Post date:** [January 16, 2019, 2:14am UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/9 "2019-01-16T02:14:28Z")
Thanks that did the trick! ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/91c8f19a2d2ac623fca1b80969accba35fce8b52.png) As a bit of a grumble… there are a ton of seemly hidden props like this in perspective… The new property panel is nice, but not having all the options show up without the need to know these custom properties is becoming annoying. Hopefully this type of stuff will make it into the docs. ---
**Author:** ![jspecht](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jspecht/32/6465_2.png) [@jspecht](https://forum.inductiveautomation.com/u/jspecht)\ **Post date:** [January 16, 2019, 2:31am UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/10 "2019-01-16T02:31:33Z")
Your grumbling is justified. There is no good way you could know about these “hidden” properties right now. As the [documentation on components](https://docs.inductiveautomation.com/display/DOC80/Working+with+Perspective+Components) get fleshed out more, it will become a good reference for all component properties. ---
**Author:** ![PerryAJ](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/perryaj/32/3281_2.png) [@PerryAJ](https://forum.inductiveautomation.com/u/PerryAJ)\ **Post date:** [January 16, 2019, 3:04am UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/11 "2019-01-16T03:04:46Z")
> [@ryanjmclaughlin](#): > > As a bit of a grumble… there are a ton of seemly hidden props like this in perspective… The new property panel is nice, but not having all the options show up without the need to know these custom properties is becoming annoying. Hopefully this type of stuff will make it into the docs. I'm on the same page as you and Joel. This is kind of the 'dark side' of having a dynamic property system. For better or worse, Vision's static property definitions made it easier to know what your options are. The upside is that Perspective has the foundation needed to grow it into a more discoverable property system while not losing the flexibility and power. Lots of ideas we want to explore, and we'll definitely get some movement in that direction once we finish up the remaining 'big pieces' of 8.0. ---
**Author:** ![brian.mills](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/brian.mills/32/6348_2.png) [@brian.mills](https://forum.inductiveautomation.com/u/brian.mills)\ **Post date:** [January 21, 2019, 2:49pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/12 "2019-01-21T14:49:25Z")
Glad to know I’m not the only one on this 😁 ---
**Author:** ![jayce.oxton](https://avatars.discourse-cdn.com/v4/letter/j/8e8cbc/32.png) [@jayce.oxton](https://forum.inductiveautomation.com/u/jayce.oxton)\ **Post date:** [March 15, 2019, 5:25pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/13 "2019-03-15T17:25:10Z")
Is there a way to add an image or icon to a label? I’ve tried creating the customer properties used above on a button over to a label and it doesn’t work. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [March 15, 2019, 5:45pm UTC](https://forum.inductiveautomation.com/t/add-image-or-icon-to-a-button/21483/14 "2019-03-15T17:45:30Z")
No, there’s not. You could always make a (small) View which has params of “text” and “path”, which has a Label and Icon Components. Position the Icon in the preferred location relative to the Label (if you want it to always be _after_ the text, you’ll have to bind the Icons position to some mathematical logic). Bind the Label.props.text property to self.view.params.text and bind Icon.props.path to self.view.params.path. At this point you have a Label/Icon template. Now wherever you want a Label with an Icon you can use an Embedded View instead. Specify the path to the View you’ve made, and supply the necessary parameters, and you’re all done.