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

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

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" />

Solution 1:^[1]

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.

Solution 2:^[2]

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>
                  ),
                }}
              />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Community
Solution 2

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]