title: Chakra UI icon not positioned inside Input
body: <p>I'm trying to position an icon correctly in the middle of an input, where that input has <code>size=&quot;xs&quot;</code>. However, all my attempts have failed, and the icon keeps being positioned too low/down. I've also tried using <code>IconButton</code> instead of a regular icon but that didn't work either.</p>
  <p><img src="https://user-images.githubusercontent.com/37128022/126064791-72119847-8adf-41e6-b962-56ab2c6939fe.png" alt="image" /></p>
  <pre><code>import { Input, InputGroup, InputLeftElement } from &quot;@chakra-ui/react&quot;
  import { SearchIcon } from &quot;@chakra-ui/icons&quot;
  
  // ...
  
      &lt;InputGroup&gt;
        &lt;InputLeftElement
          pointerEvents=&quot;none&quot;
          children={&lt;SearchIcon color=&quot;gray.300&quot;/&gt;}
          size=&quot;xs&quot;
          /&gt;
        &lt;Input
          variant=&quot;outline&quot;
          size=&quot;xs&quot;
          placeholder={``}
        /&gt;
      &lt;/InputGroup&gt;
  </code></pre>
  <p>What am I doing wrong?</p>
  <p>Here's the codesandbox. Note that in this codesandbox, the icon is actually above the middle of Input (which is still wrong), instead of below as on my local machine.</p>
  <p><a href="https://codesandbox.io/s/optimistic-bartik-5ifsd?file=/src/App.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/optimistic-bartik-5ifsd?file=/src/App.tsx</a></p>