Undo the circle of a tile icon?

[guice (Philip Z)]

In short, I’m using tiles with card-mod to increase the icon size to 40px. When doing that, my larger icons are getting cut off by the circular representation of the tile icons. How do I disable the circle aspects of this?

  - type: tile
    entity: light.bedroom_lights
    name:
      type: area
    color: amber
    show_entity_picture: true
    hide_state: true
    vertical: true
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    icon_tap_action:
      action: none
    features_position: bottom
    card_mod:
      style: |
        ha-tile-icon {
          --mdc-icon-size: 40px;
        }

[reste_narquois (Chris Warne)]

As well as increasing the icon size, you also have to increase the size of its container.

This works for me, but I can’t guarantee it will for you. Note too that this code has had to be amended quite often when something changes in the frontend with a new release, so be prepared for it to suddenly stop working.

You’ll need to play around with different numbers for height and width to find the size that works for your layout.

Someone else may well chip in with a more elegant solution.

style:
  ha-tile-icon $: |
    div.container {
      height: <your-pixel-value-here> px !important;
      width: <your-pixel-value-here> px !important;
    }
  .: |
    ha-tile-icon {
       --mdc-icon-size: 40px;
    }