Html – How to make the span wrap around the icon properly

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?

HTML:

<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>

CSS:

.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;
}

RESULT: