Dashboard 2 Beta development

Dashboard
162

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

Borrow the icons from iconify and save as "surf.svg" and "dusk-city.svg" to your shared folder.
the surf icon
dusk city icon

CSS for page

/*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

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

Make sure you have fun.

6 Likes