Icon not aligned with text

[sr-as2]

Checklist

• [X ] I updated the card to the latest version available
• [X ] I cleared the cache of my browser

Describe the bug Display bug since 4.0.0. There is like a vertical space added after the icons.

Version of the card Version: 4.0.1

To Reproduce This is the configuration I used:

type: custom:button-card
template: pill
show_icon: true
icon: phu:garbage-residual
entity: sensor.poubelles_jours
name: '[[[ return ''J-'' + entity.state ; ]]]'

Template pill:

  pill:
    variables:
      warning: false
      icon_color: contrast1
    show_label: true
    show_icon: false
    show_name: true
    size: 100%
    name: '[[[ return entity == null ? '''' : states[entity.entity_id].state; ]]]'
    label: |
      [[[ 
        return (entity == null || states[entity.entity_id].attributes.unit_of_measurement == '' || states[entity.entity_id].attributes.unit_of_measurement == null ? '' : '' + states[entity.entity_id].attributes.unit_of_measurement);
      ]]]
    tap_action:
      action: more-info
      haptic: medium
    custom_fields:
      alert: |
        [[[     
          return '<ha-icon icon=\"mdi:alert-circle\";></ha-icon>';
        ]]]
    styles:
      grid:
        - grid-template-areas: '"i n l"'
        - grid-template-columns: min-content min-content min-content
        - grid-template-rows: min-content
      card:
        - padding: 6px 10px
        - font-size: 18px
        - line-height: 18px
        - font-weight: 500
        - background: var(--contrast20)
        - width: auto
      img_cell:
        - place-self: center
        - width: 18px
        - height: 18px
        - line-height: 18px
        - margin-top: '-2px'
        - margin-right: 4px
        - border-radius: 0%
      icon:
        - line-height: 16px
        - color: '[[[return ''var(--''+variables.icon_color+'')'';]]]'
        - animation: >-
            [[[ return variables.flash_warning ? 'blink 2s ease infinite' :
            'none'; ]]]
      name:
        - line-height: 18px
        - font-size: 12px
        - color: var(--contrast1)
        - animation: >-
            [[[ return variables.flash_warning ? 'blink 2s ease infinite' :
            'none'; ]]]
      label:
        - line-height: 18px
        - font-size: 12px
        - margin-left: '[[[ return ''4px''; ]]]'
        - color: var(--contrast12)
        - animation: >-
            [[[ return variables.flash_warning ? 'blink 2s ease infinite' :
            'none'; ]]]
      custom_fields:
        alert:
          - border-radius: 50%
          - position: absolute
          - height: 14px
          - width: 14px
          - line-height: 14px
          - margin-left: 8px
          - margin-top: '-4px'
          - justify-self: start
          - align-self: start
          - border-radius: 50%
          - background-color: var(--white)
          - color: var(--red)
          - display: '[[[ return variables.alert ? ''block'' : ''none''; ]]]'
          - animation: blink 2s ease infinite

Screenshots

Expected behavior Text should be aligned with icon.

[RomRider]

@sr-as2, can you try this solution with exactly the code above and report back? I think I'll revert something in the code that has introduced a lot of problems.

styles:
  name:
    - margin-top: unset

Let me know if it fixes it. I think it's a duplicate of #742

[sr-as2]

Yes! It's ok with margin-top unset. Great, thank you @RomRider

[RomRider]

Great, I'll revert a modification in the card so that you don't have to set it.

[github-actions[bot]]

:tada: This issue has been resolved in version 4.1.0-dev.2 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 4.1.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: