# Dashboard 2 Beta development

**URL:** <https://discourse.nodered.org/t/dashboard-2-beta-development/83550>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [9 December 2023 10:57 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550 "2023-12-09T10:57:31Z")\
**Posts on this page:** 1\
**Showing post:** 162

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 January 2024 09:59 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/162 "2024-01-25T09:59:20Z")

</div>

An example of using colored svg as icon for button where every button can have background color adjusted to match some color of icon.

Here's the result:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/633ad251f7b992ca846d2e5d3f4ef8db1448e88a.png)

Borrow the icons from iconify and save as "surf.svg" and "dusk-city.svg" to your shared folder.  
[the surf icon](https://icon-sets.iconify.design/twemoji/woman-surfing/)  
[dusk city icon](https://icon-sets.iconify.design/twemoji/cityscape-at-dusk/)

CSS for page

```auto
/*for all icons define icon url and matching button 
background color as css variables.*/
.surf_icon{
    --icon_src: url("/surf.svg");
    --button_background:#4289c1;
}
.dusk_city_icon{
    --icon_src: url("/dusk-city.svg");
    --button_background:#f4900c;
}

/*change the color of the button to match color of icon. optional*/
.icon_button button{
    background-color: var(--button_background);
}
/*make the text to support multiline, change the layout to grid with 2 columns*/
.icon_button .v-btn__content{    
    white-space: normal;
    text-wrap:pretty;
    width:100%;
    gap:0.25em;
    display: grid;
    grid-template-columns: calc(var(--v-btn-height)) 1fr;
}
/*add the icon to the button using pseudoelement :: before*/
.icon_button .v-btn__content::before{
    content:"";
    background-image: var(--icon_src);
    min-height:calc(var(--v-btn-height));
    min-width:calc(var(--v-btn-height));
}

```

Make sure your css is targeted properly:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/59e7aeec728d156b2187cb8b80bccd5990ac15d6.png)

And for buttons use defined classes: for surf button `icon_button surf_icon` and for dusk button `icon_button dusk_city_icon`

Looks like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/1/d1f8e450ab38901068c19ef16d5640a179ab6259.png)

Make sure you have fun.

---

_[View the full topic](https://discourse.nodered.org/t/dashboard-2-beta-development/83550)._