title: Render an SVG icon inside a button?
body: <p>I have an SVG in a folder <code>icon.svg</code>, I'm trying to render it in a button along with text. Specifically, it's the Google icon and i'm trying to render it next to some text that says "SIGN IN WITH GOOGLE"</p>
  
  <p>I'm importing the SVG as is and trying to pass it next to the button but, the file path is rendering instead:</p>
  
  <pre><code>function App() {
    return (
      &lt;div className="App"&gt;
              &lt;button&gt;{SVG}SIGN IN WITH GOOGLE&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>That renders a button that says <code>/static/media/Icon.a1611096.svgSIGN IN WITH GOOGLE</code></p>
  
  <p>How is one supposed to render the icon <em>inside</em> the button properly?</p>
  
  <p><strong>EDIT:</strong> I've been messing with the icon and the button and got close:</p>
  
  <p><a href="https://codesandbox.io/s/10k7rr3rp4" rel="nofollow noreferrer">https://codesandbox.io/s/10k7rr3rp4</a></p>