Icon is cut off when state is open for cover

[johntdyer]

I am treying to prevent the garage door icon from being cut off and I am having some issues figuring it out ... I am horrible when it comes to CSS and design... i'm much more of of a backend systems developer :)

but when closing and closed it fits

I am using the following template

icon_garage_large:
  styles:
    custom_fields:
      icon:
        - width: 80%
        - margin-left: 1%
        - margin-top: -5%
        - fill: >
            [[[ return variables.state_on ? '#72757c' : '#9da0a2'; ]]]

  custom_fields:
    icon: |
      [[[
        if (variables.state === 'closed') {
          return `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path fill="#9EA0A2" d="M22 9V20H20V11H4V20H2V9L12 5L22 9M19 12H5V14H19V12M19 18H5V20H19V18M19 15H5V17H19V15Z" />
            </svg>
          `;
        }

        if (variables.state === 'opening' || variables.state === 'closing') {
          return `
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path fill="#9EA0A2" d="M20 9V20H18V11H2V20H0V9L10 5L20 9M17 12H3V14H17V12M17 15H3V17H17V15M22 15V10H24V15H22M22 19V17H24V19H22Z" />
          </svg>
          `;
        }

        if (variables.state === 'open') {
          return `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path fill="#9EA0A2" d="M22 9V20H20V11H4V20H2V9L12 5L22 9M19 12H5V14H19V12Z" />
            </svg>
          `;
        }

      ]]]

and am calling it here in my dashboard

          - type: custom:button-card
            entity: cover.two_car_garage_door
            name: Large
            template:
              - base
              # - loader
              - icon_garage_large

[matt8707]

its the graphics, center them in a vector editor