Custom button card icon - reduce padding

Configuration Frontend
,
1

How can I reduce a custom button card icon padding ?
IE: icon should be closer to the card edges.

image

I’ve tried a number of options to reduce padding and/or increase icon size but no success yet:

type: custom:button-card
entity: switch.wallswitch50
show_name: false
size: 120%
styles:
  card:
    - width: 300px
    - height: 300px
    - padding: '-50px'
  icon:
    - width: 300px
    - height: 300px
    - padding: '-50px'
card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 300px !important;
      padding: -50px !important;
      }

Any help or suggestions appreciated.
Thank you

2

No need for card mod, use width and transform: scale.

Scale 1.2:

IMG_0288
IMG_0288643×630 80.1 KB

Scale 1.1:

IMG_0289
IMG_0289638×637 74 KB

Code:


type: custom:button-card
icon: mdi:fan
show_name: false
styles:
  card:
    - width: 300px
    - height: 300px
    - padding: 0
  icon:
    - width: 100%
    - transform: scale(1.1)
1 Like
3

Thank you :+1: that was it.
Also discovered “transform: rotate” and “transform-origin” while searching for examples :slightly_smiling_face:

“Transform: scale” is not documented under custom_button_card and very few examples in the associated thread… So thanks again for this.

While I’m at it, is it possible to change the aspect ratio of the icon itself? Ie: make it wider/taller, or will it always stay 1/1? It works with entity_picture but I can’t find a way to change it for icon.

4

Yes, you can change the icon size by using

type: custom:button-card
size: 2em

or px, rem, vw - whatever you like.

Or you change it in the style section:


styles:
  card:
    - width: 300px
    - height: 300px
    - padding: 0
  icon:
    - width: 10%

or


styles:
  card:
    - width: 300px
    - height: 300px
    - padding: 0
  icon:
    - width: 50px
    - height: 50px

The documentation cannot cover all possible CSS features. A good source is CSS: Cascading Style Sheets | MDN

5

Sorry, maybe my question was not clear:
Can we change size on one axis only (width only or height only)?
meaning the icon would be squeezed/stretched and would not keep it’s current 1:1 aspect ratio, which seems to be the standard behavior.

6

You mean like an image? I don’t know if this is possible for mdi icons, but with svg / view-box.

7

Ok thx, just wanted to confirm. Will use entity_picture or upload my own icons if needed.
Cheers

8

Answering my own question;
changing icon size ratio (squeezed/stretched):

transform: scale(50%,90%)