How do you align text with SVG elements?
<p>I have a bunch of SVG icons and text to go with them. However, the text doesn't align with the icons. See this code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="cardSpan"&gt;
    &lt;svg style="width:24px;height:24px" viewBox="0 0 24 24"&gt;
        &lt;path fill="#000000" d="M12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4ZM12 14C16.4183 14 20 15.7909 20 18L20 20L4 20L4 18C4 15.7909 7.58172 14 12 14Z"&gt;&lt;/path&gt;
    &lt;/svg&gt;
       John Johnson
&lt;/span&gt;
&lt;p&gt;

&lt;span class="cardSpan"&gt;
    &lt;svg style="width:24px;height:24px" viewBox="0 0 24 24"&gt;
        &lt;path fill="#000000" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" /&gt;
    &lt;/svg&gt;
       Streetlane 123
&lt;/span&gt;
&lt;/p&gt;

&lt;p&gt;
&lt;span class="cardSpan"&gt;
    &lt;svg style="width:24px;height:24px" viewBox="0 0 24 24"&gt;
        &lt;path fill="#000000" d="M14,10V4.5L19.5,10M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V9L15,3H5Z" /&gt;
    &lt;/svg&gt;
       These are some cool notes.
&lt;/span&gt;
&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p>My question: how do I align the text to the center of every SVG icon next to it?</p>