Material-UI: How to show search icon in input field in react?

Question

I am using material ui. I want to show search icon in input field as shown in image

I am using this API

Here is my code

I am able to show TextField but I am not able to add a search icon. Could you please add how to add ?

 <TextField id="standard-bare" defaultValue="Bare" margin="normal" />

Gibran

Answer 1

You need to use Input Adornments.

For example:

// imports
import IconButton from "@material-ui/core/IconButton";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from "@material-ui/icons/Search";

// render

<TextField
  label="With normal TextField"
  InputProps={{
    endAdornment: (
      <InputAdornment>
        <IconButton>
          <SearchIcon />
        </IconButton>
      </InputAdornment>
    )
  }}
/>

Here is a demo:

const {
  TextField,
  InputAdornment,
  IconButton,
  SearchIcon,
  Icon
} = window['material-ui'];

class App extends React.Component {
  render() {
    return (
      <TextField
        label="With normal TextField"
        InputProps={{
          endAdornment: (
            <InputAdornment>
              <IconButton>
                <Icon>search</Icon>
              </IconButton>
            </InputAdornment>
          )
        }}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div id="root"></div>

Polack

What's the need for the IconButton here ? To make the search icon clickable or something? – Yulandayule

@AlexMcMillan yes. The icon is basically an SVG element, so you need to put in on a button. – Polack

Answer 2

You simply need to import inputAdornment

import InputAdornment from '@material-ui/core/InputAdornment';

and add InputProps to textField like this

InputProps={{
  endAdornment: (
    <InputAdornment position="start">
      <SearchIcon />
    </InputAdornment>
   )
  }}

plz find the attached img for demo of your required solution.

Touslesmois

Answer 3

In my case, I used only IconButton

import {  TextField, IconButton } from '@material-ui/core';

import { SearchOutlined } from '@material-ui/icons';

my example:

             <TextField
                fullWidth
                id="standard-bare"
                variant="outlined"
                defaultValue="How can we help"
                InputProps={{
                  endAdornment: (
                    <IconButton>
                      <SearchOutlined />
                    </IconButton>
                  ),
                }}
              />


           

Merkley

Answer 4

You can use InputBase

<Box sx={{display:"flex",justifyContent:"space-between", border:1, borderRadius:4}}>

    <InputBase />

    <IconButton>
      <BiSearch />
    </IconButton>

 </Box>

Sylas

Answer 5

With the new version of material ui,

npm install @mui/material @emotion/react @emotion/styled npm install @mui/icons-material

import { SearchOutlined, } from "@mui/icons-material";

Kyne