dir
March 22, 2021, 2:41pm
1
Hi!
I’m not able to change the icon size. I have tried to use some of the examples like:
type: ‘custom:button-card’
color_type: icon
entity: light.gasttoalett
layout: icon_label
label: |
[[[ return 'Other State: ’ + states[‘sensor.tradfri_on_off_switch’].state; ]]]
show_label: true
show_name: false
size: 100px
styles:
card:
- height: 200px
label:
- font-weight: bold
- writing-mode: vertical-rl
- text-orientation: mixed
state:
value: ‘on’
styles:
label:
- color: red
value: ‘off’
styles:
label:
- color: green
/Dir
Just a copy ‘n’ paste example which should help to see the structure (i think you missed the “icon” part)
type: 'custom:button-card'
icon: 'mdi:floor-lamp'
entity: switch.plug_go_02
name: Stehlampe
show_state: true
layout: vertical
size: 10%
styles:
card:
- height: 100px
- width: 100px
- background-color: 'rgb(33,38,40)'
- border: '1px solid rgb(80,80,80)'
- border-radius: 10%
- font-family: sans-serif
- padding: 5%
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- text-transform: none
- justify-self: left
- padding: 0px 5px
icon:
- color: 'rgb(243,156,15)'
- width: 50px
- height: 50px
- padding: 0px 55px 5px 0px
state:
- justify-self: left
- font-size: 9px
- padding: 0px 5px
state:
- value: 'on'
styles:
state:
- color: green
card:
- filter: 'drop-shadow(0 0 1.0rem rgb(243,156,15))'
- border: 0px
- value: 'off'
styles:
state:
- color: red
name:
- color: 'rgb(80,80,80)'
icon:
- color: 'rgb(80,80,80)'
dir
March 22, 2021, 4:11pm
3
Thank you for your replay. It dosen’t help.
If you create a new card “custom-button” and paste the complete code from my example into that card, can you resize the icon size by changing width and height in the section “icon”?
dir
March 22, 2021, 4:36pm
5
Thats what I did without any success. I’m able to change the icon color but not the size. Strange. I tried to changed the size to 30% and the height and width to 75px.
Hmmm. Did you try also values which show in any case a differnce? 5px 5px e. g.?
Other point: insert a grid card in a new dashboard / page and insert a custom button card into the first square of that grid. Than insert the example code which i provided into the created custom button card.
Percent values are depending on the parent element.
dir
March 23, 2021, 11:08am
7
Hi agan!
The code below gives me this card. Its setup in a new empty dashboard.
type: ‘custom:button-card’
entity: light.gasttoalett
name: Test
show_state: true
icon: ‘mdi:floor-lamp’
layout: vertical
size: 100%
styles:
grid:
- grid-template-areas: ‘“i” “n” “s”’
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- height: 100px
- width: 100px
- background-color: ‘rgb(33,38,40)’
- border: ‘1px solid rgb(80,80,80)’
- border-radius: 10%
- font-family: sans-serif
- padding: 5%
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- text-transform: none
- justify-self: left
icon:
- color: ‘rgb(243,156,15)’
- width: 100px
- height: 100px
- padding: 0px 55px 5px 0px
state:
- justify-self: left
- font-size: 9px
- padding: 0px 5px
state:
value: ‘on’
styles:
state:
- color: green
card:
- filter: ‘drop-shadow(0 0 1.0rem rgb(243,156,15))’
- border: 0px
value: ‘off’
styles:
state:
- color: red
name:
- color: ‘rgb(80,80,80)’
icon:
- color: ‘rgb(80,80,80)’
Did you put a grid card around it as stated in my last post? I doublechecked the code and it works within a grid.The custom button itself is in a grid card. We are not talking about a grid of buttons. Maybe it works without a grid card, but than you have to set up more item properties.
type: grid
cards:
- type: 'custom:button-card'
icon: 'mdi:floor-lamp'
entity: switch.plug_go_02
name: Stehlampe
show_state: true
layout: vertical
size: 10%
styles:
card:
- height: 100px
- width: 100px
- background-color: 'rgb(33,38,40)'
- border: '1px solid rgb(80,80,80)'
- border-radius: 10%
- font-family: sans-serif
- padding: 5%
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- text-transform: none
- justify-self: left
- padding: 0px 5px
icon:
- color: 'rgb(243,156,15)'
- width: 50px
- height: 50px
- padding: 0px 55px 5px 0px
state:
- justify-self: left
- font-size: 9px
- padding: 0px 5px
state:
- value: 'on'
styles:
state:
- color: green
card:
- filter: 'drop-shadow(0 0 1.0rem rgb(243,156,15))'
- border: 0px
- value: 'off'
styles:
state:
- color: red
name:
- color: 'rgb(80,80,80)'
icon:
- color: 'rgb(80,80,80)'
1 Like
dir
March 23, 2021, 12:42pm
9
Thanks again!
The code you provided me gives this result:
I’ve also tried to change the size, width and height but the icon size will not change.
dir
March 24, 2021, 1:11pm
10
Here’s a simple card with type: button and type: custom:button-card.
type: button
tap_action:
action: toggle
entity: light.gasttoalett
icon: ‘hass:fan’
icon_height: 50px
Gives a card with icon 50px:
And the code:
type: ‘custom:button-card’
tap_action:
action: toggle
entity: light.gasttoalett
icon: ‘hass:fan’
icon_height: 50px
Gives:
dir
March 27, 2021, 8:40pm
11
I’ve just noticed the icon size problem only occurs on iPad and iPhone. I started HASS on my mac for the first time on two weeks and here’s the icon changing size correctly. So the problem is only related to iPhone och iPads.
avellma
September 7, 2022, 3:30pm
12
HomeTrainee:
- value: 'on'
styles:
state:
- color: green
card:
- filter: 'drop-shadow(0 0 1.0rem rgb(243,156,15))'
- border: 0px
- value: 'off'
styles:
state:
- color: red
name:
- color: 'rgb(80,80,80)'
icon:
- color: 'rgb(80,80,80)'
This is so AWESOME !!! I love it !!!
Here are the results
I just want to thank you for sharing. We do need to open this… but this is so awesome !!!
2 Likes
Mats789
September 7, 2022, 3:47pm
13
Since it’s a fan, why not add spin:
state:
- value: 'on'
spin: true
avellma
September 8, 2022, 1:41am
14
Wow … I just tried the code… wow !!!
THAT IS AMAZING !!!
SO BEAUTIFUL !!!
Thank you @Mats789 for sharing… I thought it was cool before … not it is so awesome !!!
THANK YOU, THANK YOU, THANK YOU
Mats789
September 8, 2022, 5:41pm
15
The possibilities are endless. To dive into it look at (warning they are long…):
and
Button card
Lovelace Button card for your entities. -> github
[all]
Features
works with any toggleable entity
3 actions on tap toggle, more_info and service
state display (optional)
custom color for on and off state (optional)
custom state definition with customizable color (optional)
custom size (optional)
custom icon (optional)
custom css style (optional)
automatic color for light (optional)
custom default color for lights (when color cannot be determined) (optional)
2 color types
icon :…
avellma
September 10, 2022, 2:58am
16
@Mats789 this is UNBELIEVABLE … you open a new dimension in Dashboard and Effective Warning… I am just blown away.
Thank you for opening my eyes to the beauty of Home Assistant.
The more I know, the Less I think I know… haha
avellma
September 10, 2022, 3:03am
17
I did this Dashboard with 3D
for the 3 levels of my home.
.
.
.
.
Here is second level … the same deal …
…I was very happy with it…but what you showed me is another level of displaying elements… Thank you for sharing with me.
2 Likes
vanheerde
(Tim vH)
August 30, 2024, 7:29pm
18
Hi! Ive a simular Dashboard. I would like to creatie a extra card like you did on the bottom right. Can you tell me how you did this?