Icon size singel button card

[dir]

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

[HomeTrainee]

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]

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

[HomeTrainee]

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]

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.

[HomeTrainee]

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]

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

[HomeTrainee]

@dir

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

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

[dir]

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]

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]

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]

@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 !!!

[Mats789]

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

state:
  - value: 'on'
    spin: true

[avellma]

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]

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

Fun with custom:button-card

I’ve recently discovered the power of custom:button-card (GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant) and want to share some nice layouts I created. Be sure to read the documentation for the button-card at that link if you try to use any of these examples. I make extensive use of its templating feature. [panels with alerts] If the image above is not animated, try clicking it to open a popup. The fans should be spinning and 2 sensors should be flashing red o…

and

Lovelace: Button card

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]

@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]

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.