# Add Button Icon to dashboard

**URL:** <https://discourse.nodered.org/t/add-button-icon-to-dashboard/68831>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [10 October 2022 21:48 UTC](https://discourse.nodered.org/t/add-button-icon-to-dashboard/68831 "2022-10-10T21:48:11Z")\
**Posts on this page:** 5\
**Page:** 2

<div class="post-metadata">

**Author:** ![Marty1982](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marty1982/32/20162_2.png) [@Marty1982](https://discourse.nodered.org/u/Marty1982)\
**Post date:** [17 October 2022 21:12 UTC](https://discourse.nodered.org/t/add-button-icon-to-dashboard/68831/22 "2022-10-17T21:12:08Z")

</div>

Wow, great approach again there.  
It is very helpful to me. The last thing is that i need to close all the groups instead of toggle them because this makes that if i have a group open it closes and viceversa.

Thanks again!

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [18 October 2022 05:43 UTC](https://discourse.nodered.org/t/add-button-icon-to-dashboard/68831/23 "2022-10-18T05:43:27Z")

</div>

In the toggle-button you have to find something which tells you if it's collapsed or not. I found the icon classname (fa fa-caret-down, fa fa-caret-up). In the ui-template node exchange this function:

```auto
    function toggleGroups(){
        let toggleButtons = angular.element('.nr-dashboard-cardcarat');
        for(let i=0; i<toggleButtons.length; i++){
            if(toggleButtons[i].firstElementChild.className == 'fa fa-caret-up'){
                toggleButtons[i].click();
            };
        }
    }

```

---

<div class="post-metadata">

**Author:** ![Marty1982](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marty1982/32/20162_2.png) [@Marty1982](https://discourse.nodered.org/u/Marty1982)\
**Post date:** [18 October 2022 13:50 UTC](https://discourse.nodered.org/t/add-button-icon-to-dashboard/68831/24 "2022-10-18T13:50:09Z")

</div>

> [@knoepsche](#):
>
> ```auto
> function toggleGroups(){
> let toggleButtons = angular.element('.nr-dashboard-cardcarat');
> for(let i=0; i<toggleButtons.length; i++){
> if(toggleButtons[i].firstElementChild.className == 'fa fa-caret-up'){
> toggleButtons[i].click();
> };
> }
> }
> 
> ```

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [18 October 2022 14:34 UTC](https://discourse.nodered.org/t/add-button-icon-to-dashboard/68831/25 "2022-10-18T14:34:45Z")

</div>

You're welcome!

---

<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:** [1 November 2022 14:35 UTC](https://discourse.nodered.org/t/add-button-icon-to-dashboard/68831/26 "2022-11-01T14:35:28Z")

</div>

Closed on 1 November 2022 14:35 UTC

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

[Previous page](https://discourse.nodered.org/t/add-button-icon-to-dashboard/68831.md?page=1)