title: Add svg image as icon for Input of Semantic UI
body: <p>I'm using Input from Semantic UI in order to create a search input:</p>
  <pre><code>import React from 'react';
  import { Input } from 'semantic-ui-react';
  
  export default ({ placeholder, onChange }) =&gt; {
    return (
      &lt;Input
        icon=&quot;search&quot;
        icon={&lt;img src={searchIcon} /&gt;}
        iconPosition=&quot;left&quot;
        placeholder={placeholder}
        onChange={onChange}
      /&gt;
    );
  };
  </code></pre>
  <p>It works and looks good.</p>
  <p>The problem is that I need to change its icon with an svg image. So the svg is imported in the file and used like this:</p>
  <pre><code>import React from 'react';
  import { Input } from 'semantic-ui-react';
  import searchIcon from '../../assets/icons/searchIcon.svg';
  
  export default ({ placeholder, onChange }) =&gt; {
    return (
      &lt;Input
        icon={&lt;img src={searchIcon} /&gt;}
        iconPosition=&quot;left&quot;
        placeholder={placeholder}
        onChange={onChange}
      /&gt;
    );
  };
  </code></pre>
  <p>The problem is that it puts the icon outside of the input and on the right side of it.
  It should be inside the input and on the left part.</p>
  <p><a href="https://i.stack.imgur.com/YB6pj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YB6pj.png" alt="enter image description here" /></a></p>
  <p>There were no styling changes after the svg was added, why isn't it in the same position as the original icon?</p>