How to make the span wrap around the icon properly

Issue

I have the following HTML code that displays a cart icon with a counter badge. The SVG icon is wrapped in a container SPAN. But, as you can see in the attached image, for some reason, there's some misalignment between this container (red border) and the icon (blue border) and the icon spills outside the container.

Is there any way to make the boundaries of the container and the icon fit properly?

.site-header-cart {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header-cart .cart-contents {
  display: inline-block;
  background-color: transparent;
  height: auto;
  width: auto;
  padding: 10px 0;
  color: #222;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid lightgray;
}

.site-header-cart .cart-contents .cart-button {
  position: relative;
  border: 1px solid red;
}

.site-header-cart .cart-contents .cart-button svg {
  display: inline-block;
  max-width: 100%;
  fill: currentColor;
  border: 1px solid blue;
}

.site-header-cart .cart-contents .cart-button .cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  color: #fff;
  background-color: #999;
  border-radius: 100%;
  font-size: 0.563rem;
  line-height: 15px;
  text-align: center;
}

<ul class="site-header-cart">
  <li>
    <a class="cart-contents" href="https://www.example.com/cart/">
      <span class="cart-button">
                <svg class="svg-icon" width="20" height="20" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid blue;"><path d="M 7.499889,21 Q 6.7574042,21 6.2286651,20.47125 5.6999261,19.9425 5.6999261,19.2 5.6999261,18.4575 6.2286651,17.92875 6.7574042,17.4 7.499889,17.4 8.2423738,17.4 8.771113,17.92875 9.2998519,18.4575 9.2998519,19.2 9.2998519,19.9425 8.771113,20.47125 8.2423738,21 7.499889,21 Z M 16.499704,21 Q 15.757219,21 15.22848,20.47125 14.699741,19.9425 14.699741,19.2 14.699741,18.4575 15.22848,17.92875 15.757219,17.4 16.499704,17.4 17.242189,17.4 17.770928,17.92875 18.299667,18.4575 18.299667,19.2 18.299667,19.9425 17.770928,20.47125 17.242189,21 16.499704,21 Z M 6.7349048,6.6 8.8948603,11.1 H 15.194731 L 17.66968,6.6 Z M 5.8799223,4.8 H 19.15465 Q 19.672138,4.8 19.942133,5.2612499 20.212128,5.7225 19.964633,6.1949999 L 16.769698,11.955 Q 16.522203,12.405 16.105962,12.6525 15.689721,12.9 15.194731,12.9 H 8.4898688 L 7.499889,14.7 H 18.299667 V 16.5 H 7.499889 Q 6.4874098,16.5 5.9699205,15.611249 5.4524311,14.7225 5.9249213,13.845 L 7.1398964,11.64 3.899963,4.8 H 2.1 V 3 H 5.0249398 Z M 8.8948603,11.1 H 15.194731 Z"></path>
                </svg>
                <span class="cart-badge">1</span>
      </span>
    </a>
  </li>
</ul>

RESULT:

Solution

Adding display: flex along with align-items: center, and justify-content: center to the .site-header-cart .cart-contents .cart-button selector will align the SVG icon properly within its container.

.site-header-cart {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header-cart .cart-contents {
  display: inline-block;
  background-color: transparent;
  height: auto;
  width: auto;
  padding: 10px 0;
  color: #222;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid lightgray;
}
.site-header-cart .cart-contents .cart-button {
  position: relative;
  display: flex; /* Added this */
  align-items: center; /* Added this */
  justify-content: center; /* Added this */
  border: 1px solid red;
}
.site-header-cart .cart-contents .cart-button svg {
  display: inline-block;
  max-width: 100%;
  fill: currentColor;
  border: 1px solid blue;
}
.site-header-cart .cart-contents .cart-button .cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  color: #fff;
  background-color: #999;
  border-radius: 100%;
  font-size: 0.563rem;
  line-height: 15px;
  text-align: center;
}

<ul class="site-header-cart">
    <li>
        <a class="cart-contents" href="https://www.example.com/cart/">
            <span class="cart-button">
                <svg class="svg-icon" width="20" height="20" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid blue;"><path d="M 7.499889,21 Q 6.7574042,21 6.2286651,20.47125 5.6999261,19.9425 5.6999261,19.2 5.6999261,18.4575 6.2286651,17.92875 6.7574042,17.4 7.499889,17.4 8.2423738,17.4 8.771113,17.92875 9.2998519,18.4575 9.2998519,19.2 9.2998519,19.9425 8.771113,20.47125 8.2423738,21 7.499889,21 Z M 16.499704,21 Q 15.757219,21 15.22848,20.47125 14.699741,19.9425 14.699741,19.2 14.699741,18.4575 15.22848,17.92875 15.757219,17.4 16.499704,17.4 17.242189,17.4 17.770928,17.92875 18.299667,18.4575 18.299667,19.2 18.299667,19.9425 17.770928,20.47125 17.242189,21 16.499704,21 Z M 6.7349048,6.6 8.8948603,11.1 H 15.194731 L 17.66968,6.6 Z M 5.8799223,4.8 H 19.15465 Q 19.672138,4.8 19.942133,5.2612499 20.212128,5.7225 19.964633,6.1949999 L 16.769698,11.955 Q 16.522203,12.405 16.105962,12.6525 15.689721,12.9 15.194731,12.9 H 8.4898688 L 7.499889,14.7 H 18.299667 V 16.5 H 7.499889 Q 6.4874098,16.5 5.9699205,15.611249 5.4524311,14.7225 5.9249213,13.845 L 7.1398964,11.64 3.899963,4.8 H 2.1 V 3 H 5.0249398 Z M 8.8948603,11.1 H 15.194731 Z"></path>
                </svg>
                <span class="cart-badge">1</span>
            </span>
        </a>
    </li>
</ul>

Answered By - mandy8055