title: converting svg tags to embedded svg in image
body: <p>I want to create a responsive navbar using Tailwind CSS and followed this guide</p>
  
  <p><a href="https://youtu.be/ZT5vwF6Ooig?list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&amp;t=74" rel="nofollow noreferrer">https://youtu.be/ZT5vwF6Ooig?list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&amp;t=74</a></p>
  
  <p>Unfortunately there is no link for the SVG path so all I have is</p>
  
  <pre><code>&lt;button&gt;
    &lt;svg class="h-6 w-6 text-gray-700 fill-current" viewBox="0 0 24 24"&gt;
      &lt;path fill-rule="evenodd" d="... the missing svg path ..." /&gt;
    &lt;/svg&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>So I tried to do it on my own with an external svg. For testing purposes I'm using this svg</p>
  
  <p><a href="https://www.iconfinder.com/icons/3324998/menu_icon" rel="nofollow noreferrer">https://www.iconfinder.com/icons/3324998/menu_icon</a></p>
  
  <p>Due to the fact the svg has no <code>src</code> tag I decided to embed it within an <code>img</code> tag. I currently have</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMyIgeDI9IjIxIiB5MT0iMTIiIHkyPSIxMiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSI2IiB5Mj0iNiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSIxOCIgeTI9IjE4Ii8+PC9zdmc+");
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css" rel="stylesheet" /&gt;
  
  &lt;button&gt;
    &lt;img class="h-6 w-6 text-red-700" /&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would expect the image to be red but it remains black. How can I fix the color for it? Further I'm not sure if more attributes are required. Maybe I don't have to embed it within an image tag and other solutions fit better?</p>
  
  <p>Thanks in advance</p>