Material-UI: How to show search icon in input field in react?
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>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.
