Help with Custom Button Card

Configuration Frontend
1

Good evening all, I am trying to develop a person card from a custom button card. I am having an issue with the spacing of the text around the icon. Here is what the card looks llike:

image

What I want to do is:

  1. Get the text closer to the icon, preferably left justified, but that is not a requirement.
  2. Tighten up the space around the edges of the card.

Here is the current code for the button card.

type: custom:button-card
entity: person.rob
icon: mdi:alpha-r-box-outline
color_type: icon
show_state: true
state:
  - value: home
    icon: mdi:alpha-r-box
styles:
  grid:
    - grid-template-areas: '" i n"  "i s"'
    - grid-template-rows: 1fr 1fr
    - grid-template-columns: 1fr 1fr
  card:
    - background-size: cover
    - width: 150px
  state:
    - color: rgb(0, 255, 0)
    - font: 12px Roboto
  name:
    - color: rgb(0, 255, 0)
    - font: 12px Roboto

I would greatly appreciate any help.

Thanks in advance.

2

Use margin-left to adjust the state and name
image

type: custom:button-card
entity: person.jay673
name: Robert
icon: mdi:alpha-r-box-outline
color_type: icon
show_state: true
state:
  - value: home
    icon: mdi:alpha-r-box
styles:
  grid:
    - grid-template-areas: '" i n"  "i s"'
    - grid-template-rows: 1fr 1fr
    - grid-template-columns: 1fr 1fr
  card:
    - background-size: cover
    - width: 150px
  state:
    - color: rgb(0, 255, 0)
    - font: 12px Roboto
    - margin-left: -70px
  name:
    - color: rgb(0, 255, 0)
    - font: 12px Roboto
    - margin-left: -82px