Move SearchIcon to the left

[chaos87]

Hi there,

First, thanks for the search bar, it works great for my use case!

One thing troubles me a tiny bit, I would like to move the Search Icon to the left side of the bar while keeping the Clear Icon on the right side. Now both Clear Icon and Search Icon are on the right side and they overlap each other rendering search icon useless when user inputs something.

I'm pretty sure it should be an easy code change, but have not been able to achieve it.

Thanks!

[jersrej]

+1 for this

[rofrol]

You can try with

  searchIconButton: {
    display: 'none'
  },

and add search icon on the left

or

const useStyles = makeStyles((theme) => ({
  searchContainer: {
    order: 2,
    border: '1px solid green'
  },
  searchIconButton: {
    order: 1,
    '& + *': { /* to select clear icon button */
      border: '1px solid pink',
      order: 2
    }
  }
}

return <SearchBar classes={{ searchContainer: classes.searchContainer, searchIconButton: classes.searchIconButton }} />

• https://github.com/TeamWertarbyte/material-ui-search-bar/blob/7893ec610d6843e2e5d5f3f830484d50121d0d03/src/components/SearchBar/SearchBar.js#L25