# Dashboard 2.0 icon animation

**URL:** https://discourse.nodered.org/t/dashboard-2-0-icon-animation/93388
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [23 November 2024 15:10 UTC](https://discourse.nodered.org/t/dashboard-2-0-icon-animation/93388 "2024-11-23T15:10:15Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)
#### Post date: [23 November 2024 15:10 UTC](https://discourse.nodered.org/t/dashboard-2-0-icon-animation/93388/1 "2024-11-23T15:10:15Z")

</div>

thanks for all the great help so far. Is there a way to animate an icon (button icon) in dashboard 2? I was searching but couldn't find any useful information.  
Using ui\_update to send the material design icon and to change it.

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [25 November 2024 09:35 UTC](https://discourse.nodered.org/t/dashboard-2-0-icon-animation/93388/2 "2024-11-25T09:35:02Z")

</div>

> **[Button ui-button | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-button.html#dynamic-properties)**
>
> Buttons create interactive UI's and can trigger flows in Node-RED

That details that you can use `ui_update.icon` to modify the icon

---

<div class="post-metadata">

### Author: ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)
#### Post date: [25 November 2024 10:53 UTC](https://discourse.nodered.org/t/dashboard-2-0-icon-animation/93388/3 "2024-11-25T10:53:59Z")

</div>

I'm using `msg.ui_update.icon` to show the icon. But I was not able to get it animated e.g. rotating. checked the doc but could not find any information.  
I'm just providing the icon name with `msg.ui_update.icon`

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [25 November 2024 23:18 UTC](https://discourse.nodered.org/t/dashboard-2-0-icon-animation/93388/4 "2024-11-25T23:18:44Z")

</div>

Send `mdi-spin mdi-cog` in `msg.ui_update.icon`

docs: [UI Template Examples | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/template-examples.html#spin)

![Screen recording 2024-11-25 23.17.46](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a9fcdfcf76b4ba8747d1d6076d64e4b4e4515089.gif)

---

<div class="post-metadata">

### Author: ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)
#### Post date: [26 November 2024 11:36 UTC](https://discourse.nodered.org/t/dashboard-2-0-icon-animation/93388/5 "2024-11-26T11:36:15Z")

</div>

Thanks @Steve-Mcl for pointing out!

---

<div class="post-metadata">

### Author: ![edstobi](https://avatars.discourse-cdn.com/v4/letter/e/aca169/32.png) [@edstobi](https://discourse.nodered.org/u/edstobi)
#### Post date: [30 November 2024 21:16 UTC](https://discourse.nodered.org/t/dashboard-2-0-icon-animation/93388/6 "2024-11-30T21:16:29Z")

</div>

@Steve-Mcl , thank you for the explanation. This works for a single button. Is there a similar solution for a button group?  
If not for the icon, then perhaps for the color that was specified in the button group configuration.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [14 December 2024 21:16 UTC](https://discourse.nodered.org/t/dashboard-2-0-icon-animation/93388/7 "2024-12-14T21:16:44Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.