I have the following markup on my page:

<h1 id="some-fragment">
    <a href="#some-fragment" class="fragment-link">
        <svg height="16" width="16" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">
          <path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path>
              <line x1="8" y1="12" x2="16" y2="12"></line>
        </svg>
    </a>
    Header text 
    <code>Ooh, a code block</code>
</h1>

with the following CSS:

/* irrelevant to this, but looks better */
a {
  text-decoration: none
}

h1 {
  display: flex;
  align-items: center;
}

svg {
  display: block;
}

code {
  padding: 2px 4px;
  background: #888;
  border-radius: 4px;
}

What I want to do is vertically align the icon next to the header text, but when I add display: flex, the code block looks super goofy. It gets crushed against the header text, losing the spacing following “text”, and it seems to grow & get vertically off center, compared to the text. No combination of flex-grow: 0 has seemed to have an effect here.

I just want this to look identical to how it was w/out display: flex, but with the icon centered next to it.