Custom Button Card reduce the space between mdi icon & name

Configuration Frontend
1

Hi, loving the custom button, when you use:

layout: icon_name

There is a large gap between the Icon & Name

image
image841×400 22.6 KB

What is the best method to reduce this distance

2

Try setting justify-self: left for the state.

3

Thanks, brings it slightly left, without the icon the command justify-self: left takes the state to the far left of the box, so the seems to be added to the icon.
I have tried:

          styles:
            card:
              - height: 40px
              - font-size: 12px
            state:
              - justify-self: left
            icon:  
              - padding-left: 0px
              - padding-right: 0px

and margin-right: 0px

I can use on the state: margin-left: -20px which brings them closer but that moves around depening on device and screen res.

4

With using grid options (see docs for the card) you can distribute elements as you wish.

5

Trying to add the entity icon for sun.sun to the beginning of return name in this code

entity: sun.sun
color: auto
color_type: icon
show_icon: false
styles:
  card:
    - height: 30px
    - font-size: 13px
    - padding: 2px
    - background: var(--primary-color)
    - color: yellow
name: |
  [[[
    const attrs = states['sun.sun'].attributes;
    const rise = new Date(attrs.next_rising).toLocaleTimeString('en', { timeStyle: 'short', hour12: false });
    const set = new Date(attrs.next_setting).toLocaleTimeString('en', { timeStyle: 'short', hour12: false });
    return `Sunrise at ${rise}  Sunset at ${set}`;
  ]]]

Can anyone advise?