htmlinline-svg

How to set width and height of inline svg's

How can I set the whidth and height of my inline svg?

Why is it not working in my case?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<svg style="display: none">
  <symbol id="checkmark" viewBox="0 0 24 24">
    <path stroke="#6CB21F" fill="#6CB21F" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
  </symbol>
</svg>
<div style="max-width:200px;">
  <div class="card shadow w-100 border-info mb-5 rounded-lg">
    <div class="card-body pt-0">
      <ul class="price-benefits list-unstyled">
        <li class="d-flex flex-row mb-3"><svg height="24" width="24" class="mr-2"><use href="#checkmark"></use></svg> Test Test Test Test Test Test Test Test Test Test</li>
        <li class="d-flex flex-row mb-3"><svg height="24" width="24" class="mr-2"><use href="#checkmark"></use></svg> Test</li>
        <li class="d-flex flex-row mb-3"><svg height="24" width="24" class="mr-2"><use href="#checkmark"></use></svg> Test Test Test Test Test Test Test Test Test Test</li>
        <li class="d-flex flex-row mb-3"><svg height="24" width="24" class="mr-2"><use href="#checkmark"></use></svg> Test</li>
      </ul>
    </div>
  </div>
</div>

Solution

  • Flex is shrinking your icons. In order to avoid this create a CSS class like:

    .shrink-0 {
   flex-shrink: 0;
}

    and it to your <svg> like this

    <svg height="24" width="24" class="mr-2 shrink-0">