Chakra UI icon not positioned inside Input

Question

I'm trying to position an icon correctly in the middle of an input, where that input has size="xs". However, all my attempts have failed, and the icon keeps being positioned too low/down. I've also tried using IconButton instead of a regular icon but that didn't work either.

import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react"
import { SearchIcon } from "@chakra-ui/icons"

// ...

    <InputGroup>
      <InputLeftElement
        pointerEvents="none"
        children={<SearchIcon color="gray.300"/>}
        size="xs"
        />
      <Input
        variant="outline"
        size="xs"
        placeholder={``}
      />
    </InputGroup>

What am I doing wrong?

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.

https://codesandbox.io/s/optimistic-bartik-5ifsd?file=/src/App.tsx

Answer 1

You can solve the problem by adding className to chakra components and editing styles:

export default function App() {
  return (
    <InputGroup>
      <InputLeftElement
        className="InputLeft"
        pointerEvents="none"
        children={<SearchIcon className="SearchIcon" color="gray.300" />}
        size="xs"
      />
      <Input className="Input" variant="outline" size="xs" placeholder={``} />
    </InputGroup>
  );
} 

And Here's the styles:

.InputLeft {
  top: 3px !important;
  left: 3px !important;
}
.Input {
  padding-left: 24px !important;
}

If in your local, the icon is below the input. You can change the top to bottom in InputLeft class.

Here's the updated codesandbox :

Answer 2

This issue is solvable without CSS. You just have to add the size attribute to the InputGroup as well.

See the updated code sandbox.

     <InputGroup size="xs">
        <InputLeftElement
          pointerEvents="none"
          children={<SearchIcon color="gray.300" />}
          size="xs"
        />
        <Input variant="outline" size="xs" placeholder={``} />
      </InputGroup>