Icon size singel button card

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)'

Thank you for your replay. It dosen’t help. image

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”?

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.

Hi agan!
The code below gives me this card. Its setup in a new empty dashboard.

image

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

Thanks again!
The code you provided me gives this result:
image

I’ve also tried to change the size, width and height but the icon size will not change.

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:

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.

This is so AWESOME !!! I love it !!!

Here are the results
image

I just want to thank you for sharing. We do need to open this… but this is so awesome !!!

1 Like

Since it’s a fan, why not add spin:

state:
  - value: 'on'
    spin: true

:slightly_smiling_face:

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

:grinning: The possibilities are endless. To dive into it look at (warning they are long…):

and

@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

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