How to set width and height of inline svg's

Question

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/[email protected]/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>

Answer 1

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

Answer 2

It isn't about the SVG, it's about flex it shrinks the SVG to give more width to other elements.

Use min-width in that case.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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" style="min-width: 24px" 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" style="min-width: 24px" class="mr-2"><use href="#checkmark"></use></svg> Test</li>
        <li class="d-flex flex-row mb-3"><svg height="24" width="24" style="min-width: 24px" 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" style="min-width: 24px" class="mr-2"><use href="#checkmark"></use></svg> Test</li>
      </ul>
    </div>
  </div>
</div>

Here's an article about that: https://css-tricks.com/making-width-and-flexible-items-play-nice-together/