# Dynamically change button icons **URL:** \ **Category:** Ask for Help\ **Created:** [January 28, 2025, 7:23pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616 "2025-01-28T19:23:46Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![Jason\_Bronfeld](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jason_bronfeld/32/64705_2.png) [@Jason\_Bronfeld](https://community.glideapps.com/u/Jason_Bronfeld)\ **Post date:** [January 28, 2025, 7:23pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/1 "2025-01-28T19:23:46Z")
Hello all. I am working on a navigation app for sailors. They can choose from various locations and the app serves up some optimal times for passage. ![ccc](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/b/1bd8acc352896fe3197e430ad519ef4d1d1eabb4.png) The picture above shows the control buttons for the Cape Cod Canal. Notice the left and right buttons. The Cape Cod Canal flows northeast and southwest. The edge buttons allow you to get data when going either direction. ![cdc](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/a/ba27fe5ffa45ee0c7999e8d885af4f417a33e250.png) This second picture show data for the Chespeake Delaware Canal. It flows east and west. However the button icons are static and I’m not finding a easy way to change them to east west arrows. The labels of the buttons are dynamic and can be used to select graphics. All help appreciated. ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [January 28, 2025, 8:42pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/2 "2025-01-28T20:42:31Z")
Is that a button block? Only thought would be to add all of the buttons you need, but set the actions up in workflows with a condition to only allows actions based on the canal. Any canel that wouldn’t allow an action should make the button hidden. Another thought would be to switch to using just text on your buttons with unicode or emoji arrows, but it might not look as nice. ---
**Author:** ![Jason\_Bronfeld](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jason_bronfeld/32/64705_2.png) [@Jason\_Bronfeld](https://community.glideapps.com/u/Jason_Bronfeld)\ **Post date:** [January 28, 2025, 9:20pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/3 "2025-01-28T21:20:08Z")
I do like your first idea. Kinda brut force, but it will work. Yes, that’s a button block with six buttons. I was hoping there was cool CSS trick that might work. Any thoughts? ---
**Author:** ![Ashton\_Pelzel](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ashton_pelzel/32/78156_2.png) [@Ashton\_Pelzel](https://community.glideapps.com/u/Ashton_Pelzel)\ **Post date:** [January 28, 2025, 9:29pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/4 "2025-01-28T21:29:31Z")
First, go to Change Icon on the nav bar. Then, go to Legacy. That way, there are more button icons there. Problem solved; use old Glideapps icons. ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [January 28, 2025, 9:32pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/5 "2025-01-28T21:32:01Z")
There might be some CSS options. I try not to user too much CSS, so I’m not much help there. I guess you could try overriding the image, or may apply a rotation to the image. Not sure how easy it is to target the button. ---
**Author:** ![Jason\_Bronfeld](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jason_bronfeld/32/64705_2.png) [@Jason\_Bronfeld](https://community.glideapps.com/u/Jason_Bronfeld)\ **Post date:** [January 28, 2025, 9:36pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/6 "2025-01-28T21:36:04Z")
Related to your first suggestion, if I add each button individually, I can set a visibility on each one. Is there a way to set a visibility condition on individual buttons in a button block? ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [January 28, 2025, 9:42pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/7 "2025-01-28T21:42:21Z")
You shouldn’t need to set visibility, and I don’t think you can on an individual button basis with a button block. What you do is have those buttons run a workflow action, but in that workflow give it a condition at the top that needs to meet your criteria to show the button. If the criteria doesn’t match, it should hide the button because there won’t be an action it can run. ---
**Author:** ![Jason\_Bronfeld](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jason_bronfeld/32/64705_2.png) [@Jason\_Bronfeld](https://community.glideapps.com/u/Jason_Bronfeld)\ **Post date:** [January 28, 2025, 10:17pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/8 "2025-01-28T22:17:56Z")
I thought show / hide was done with visibility. How do i control show / hide in a workflow? Which action should I use? ---
**Author:** ![Jason\_Bronfeld](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jason_bronfeld/32/64705_2.png) [@Jason\_Bronfeld](https://community.glideapps.com/u/Jason_Bronfeld)\ **Post date:** [January 28, 2025, 10:20pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/9 "2025-01-28T22:20:11Z")
Thanks for the suggestion, but the issue is not that there aren’t icons available, but that I want them to change on the buttons based on user selection. I don’t want to rotate an existing icon, as you said, I want to change one legacy icon for another dynamically. ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [January 28, 2025, 10:35pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/10 "2025-01-28T22:35:47Z")
There is no show/hide. You are just putting a condition on the action when you create a workflow. Each button that needs to show or hide should be assigned to it’s own workflow. If the condition in that workflow doesn’t allow the following workflow actions to run, then it will hide the button. If you want to control visibility using visibility conditions, then you will have to create individual buttons instead of a button block, but it’s not going to look good, so you have to do it via workflow actions with a condition on the workflow if you want to retain your horizontal button placement. ---
**Author:** ![Jason\_Bronfeld](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jason_bronfeld/32/64705_2.png) [@Jason\_Bronfeld](https://community.glideapps.com/u/Jason_Bronfeld)\ **Post date:** [January 29, 2025, 3:39pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/11 "2025-01-29T15:39:56Z")
For the life of me, I can’t create a workflow that makes a button disappear. Is it possible for you to post some screen shots of examples? ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [January 29, 2025, 4:03pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/12 "2025-01-29T16:03:19Z")
It would be something like this, and assigning that workflow to the button. ![1000004224](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/3/03146cede7adb1b942b4933134b025055d8cca02.png) But, on second look, you can in fact assign conditions to individual buttons in a button block. Forgot about that option. ![1000004225](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/7/67438aaecee0dd07a786e73ad68504f796a8fc13.png) ---
**Author:** ![Jason\_Bronfeld](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jason_bronfeld/32/64705_2.png) [@Jason\_Bronfeld](https://community.glideapps.com/u/Jason_Bronfeld)\ **Post date:** [January 29, 2025, 5:14pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/13 "2025-01-29T17:14:19Z")
I tried that, but the buttons didn’t disappear. Have you be able to make the disappear when the condition isn’t met? ---
**Author:** ![Jason\_Bronfeld](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jason_bronfeld/32/64705_2.png) [@Jason\_Bronfeld](https://community.glideapps.com/u/Jason_Bronfeld)\ **Post date:** [January 29, 2025, 5:16pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/14 "2025-01-29T17:16:58Z")
Wow. I take that back. Now my buttons disappear! Woo hoo! Thank you. ---
**Author:** ![Jason\_Bronfeld](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jason_bronfeld/32/64705_2.png) [@Jason\_Bronfeld](https://community.glideapps.com/u/Jason_Bronfeld)\ **Post date:** [January 29, 2025, 5:52pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/15 "2025-01-29T17:52:30Z")
Just wanted to say thank you again. While it’s a lot of buttons and kind of tedious, it’s easier and more robust than CSS or javascript. Really appreciate your help and insight. ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [February 5, 2025, 5:52pm UTC](https://community.glideapps.com/t/dynamically-change-button-icons/79616/16 "2025-02-05T17:52:44Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.