# Using javascript to dynamically change button icons

**URL:** <https://community.glideapps.com/t/using-javascript-to-dynamically-change-button-icons/79635>\
**Category:** Ask for Help\
**Created:** [January 29, 2025, 3:42pm UTC](https://community.glideapps.com/t/using-javascript-to-dynamically-change-button-icons/79635 "2025-01-29T15:42:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**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:42pm UTC](https://community.glideapps.com/t/using-javascript-to-dynamically-change-button-icons/79635/1 "2025-01-29T15:42:15Z")

</div>

Hi all. I have an app for which I’d like to dynamically change the icons used in a button block. CSS seems to be a dead end, or too complex. Is there a way to do this using javascript? I need help understanding how to use javascript with Glide more than I need the specific javascript syntax.

All help appreciated.

---

<div class="post-metadata">

**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:10pm UTC](https://community.glideapps.com/t/using-javascript-to-dynamically-change-button-icons/79635/2 "2025-01-29T16:10:24Z")

</div>

Javascript can’t be directly injected into the front end of an app. You can use it in the data though. If you wanted javascript to come into play to manipulate things on the front end, then you would have to work with the custom AI component and try to get it to show your buttons the way you want and call separate actions for each button.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 31, 2025, 12:55am UTC](https://community.glideapps.com/t/using-javascript-to-dynamically-change-button-icons/79635/3 "2025-01-31T00:55:22Z")

</div>

Can you explain more on the conditions needed to change the color? CSS should be good for this.

---

<div class="post-metadata">

**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 31, 2025, 4:29am UTC](https://community.glideapps.com/t/using-javascript-to-dynamically-change-button-icons/79635/4 "2025-01-31T04:29:15Z")

</div>

I’m not trying to change the color. CSS is for that. I’m trying to change the icon, the svg href.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 31, 2025, 8:02am UTC](https://community.glideapps.com/t/using-javascript-to-dynamically-change-button-icons/79635/5 "2025-01-31T08:02:03Z")

</div>

Sorry, I got confused on my first read. I think you got your issue solved on another thread.

> [@Dynamically change button icons](https://community.glideapps.com/t/dynamically-change-button-icons/79616):
>
> 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. 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. This second picture show data for the Chespeake Delaware Canal. It flows east and west. However the button icon…