Set an icon and icon background like in Tiles card

[Mariusthvdb]

getting used to the core Tile card and its use of icons, I like to create a template for the same styling in custom:button-card

it is less than obvious, as the elements aren't the same (eg .container vs image-cell and others) and the icon background in button-card currently is not set by default at all so it seems.

there is this in the Frontend repo in core for the tile card icon/icon-background: https://github.com/home-assistant/frontend/blob/a6d3041d599d02042e8857d06ec932933e1ea1dd/src/components/tile/ha-tile-icon.ts

which is rather a lot to translate to button-card 's icon and its background

maybe we can build it here together?
because, to give a simplest of issues:

  styles:
    icon:
      - background: rgba(from var(--button-card-light-color) r g b/0.2)
      - border-radius: 100%

which works in the UI editor

is made more difficult in a more complex card....

and makes it immediately clear we need to set the size of both elements....

that is only about the icon in regular state, and not even talking about tall the other styles, like hover ripple ea..

[dcapslock]

When icon is round this is pretty easy as you say. Below example with ripple adjusted to match icon background.

type: custom:button-card
entity: light.kitchen_lights
section_mode: true
grid_options:
  rows: 3
  columns: 6
tap_action:
  action: toggle
icon_tap_action:
  action: toggle
styles:
  card:
    - "--button-card-ripple-hover-opacity": 0.04
    - "--button-card-ripple-icon-hover-opacity": 0.5
    - "--button-card-ripple-icon-inset-padding": 0
    - "--button-card-ripple-icon-border-radius": 9999px
  icon:
    - background: rgba(from var(--button-card-light-color) r g b/0.2)
    - border-radius: 9999px

However when the icon/image does not have 1:1 aspect ratio, this is where pill style does not really work well. This is why button-hard default ripple is not a pill but a rounded square as this looks best in majority of cases for a default.

This is an example of using 12px border radius for background and ripple on a 'tall' PNG

type: custom:button-card
entity: light.kitchen_lights
section_mode: true
grid_options:
  rows: 3
  columns: 6
icon: mdi:access-point-minus
show_entity_picture: true
entity_picture: /local/media/height.png
hold_action:
  action: toggle
icon_tap_action:
  action: toggle
styles:
  card:
    - "--button-card-ripple-hover-opacity": 0.04
    - "--button-card-ripple-icon-hover-opacity": 0.5
    - "--button-card-ripple-icon-inset-padding": 0
    - "--button-card-ripple-icon-border-radius": 12px
  icon:
    - background: rgba(from var(--button-card-light-color) r g b/0.2)
    - border-radius: 12px

Screen.Recording.2025-10-07.at.11.52.36.am.mov

[dcapslock]

Where does tile allow for a non 1:1 ratio image?

[dcapslock]

If I set a person entity picture it wants me to crop. I can only set a entity picture to a tile. Unless I am missing something.

[RomRider]

The problem is that img_cell is around the icon and and takes the whole grid area it is set to sit in. If the grid area is not square... you'll have non-round shapes.
I've tried many times to come around this issue but couldn't find a reliable way... CSS is my nemesis 🙃

We should look into that @dcapslock

[dcapslock]

Perhaps leaving the img_cell and grid as is makes sense as there will be so many finely tuned grids out there, best not to shake those I think. Now having a tile option wrapping tile may be something different, but then again, that is Mushroom Template Card.

Or maybe just 1:1 constraint on img_cell image for those who want is square so they can shape a button as a supercharged tile square.

As for the ripple, unless the image is square, having a default circle look just doesn't work. I tried lots of things when writing the code. Without a square image, a circle does not work.

But the beauty is... its all configurable because its button card. 🎈

[Mariusthvdb]

Where does tile allow for a non 1:1 ratio image?

not sure what you mean by that, it just circles and centers the give icon. Any icon.

as for the squared option, this is done via the new variable: ha-tile-icon-border-radius which unset in a theme makes for the regular rounded icon backgrounds, and the. I eg set it with my var(--ha-card-border-radius) set to 0px, it squares them all, and still are centered

But the beauty is... its all configurable because its button card. 🎈

and this is the reason I posted here, because I feel the same, but cant manage somehow.... arghh

[alexsaas]

Hi. Maybe I'm too late (I just stumbled across this now) or I didn't understand the problem correctly, but I'd still like to show you my solution. I implemented it using img_cell (apologies for the German names and terms):

type: custom:button-card
entity: light.flur_tischleuchte
show_name: true
show_label: false
show_state: true
name: Tischleuchte
tap_action:
  action: more-info
icon_tap_action:
  action: toggle
size: 24px
styles:
  card:
    - border: none
    - padding: 10px 10px 10px 10px
    - "--button-card-ripple-color": none
  img_cell:
    - height: 36px
    - width: 36px
    - border-radius: 25px
    - background: |
        [[[
          if (entity.state === 'on') {
            if (entity.attributes.rgb_color) {
              const rgb = entity.attributes.rgb_color;
              return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${0.2})`;
            }
            return 'rgba(255,193,7,0.2)';
          } else {
            return 'rgba(158,158,158,0.2)';
          }
        ]]]
  icon:
    - color: |
        [[[
          if (entity.state === 'on') {
            if (entity.attributes.rgb_color) {
              const rgb = entity.attributes.rgb_color;
              return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${1})`;
            }
            return 'rgba(255,193,7,1)';
          } else {
            return 'rgba(158,158,158,1)';
          }
        ]]] 
  name:
    - font-size: var(--ha-font-size-m)
    - font-weight: var(--ha-font-weight-medium)
    - line-height: var(--ha-line-height-normal)
    - letter-spacing: 0.1px
    - justify-self: left
    - text-align: left
    - padding-left: 10px
  state:
    - font-size: var(--ha-font-size-s)
    - font-weight: var(--ha-font-weight-normal)
    - line-height: var(--ha-line-height-condensed)
    - letter-spacing: 0.4px
    - justify-self: left
    - text-align: left
    - padding-left: 10px
  grid:
    - grid-template-areas: |
        "i n n n" 
        "i s s s"
    - grid-template-columns: min-content auto auto 1fr
    - grid-template-rows: auto
state:
  - value: "on"
    state_display: |
      [[[
        if (entity.attributes.brightness !== undefined) {
          return Math.round(entity.attributes.brightness / 2.55) + ' %';
        } else {
          return 'Ein';
        }
      ]]]