I have a form with a text input element:
<FormControl className='searchOrder'>
<input
className='form-control'
type='text'
placeholder='Search order'
aria-label='Search'
value={this.number}
input={<Input />}
onChange={this.handleChangeOrderNumber}
/>
</FormControl>
The functionality is working correctly, but I would like to add a search icon on the left side of the input field. This is how I want it to look:
https://i.stack.imgur.com/MRTw5.png
I attempted adding the code snippet inside the input tag which resulted in errors. Placing it outside did not display the icon as well.
<FormControl className='searchOrder'>
<input
className='form-control'
type='text'
placeholder='Search order'
aria-label='Search'
value={this.number}
input={<Input />}
onChange={this.handleChangeOrderNumber}
/>
<span>
<i class='fas fa-search'></i>
</span>
</FormControl>
Any suggestions on how to resolve this issue?
If it helps, here is the CSS for the searchOrder class:
.searchOrder {
display: flex;
flex-direction: column;
position: absolute;
width: 20%;
max-width: 250px;
height: 20%;
left: 0px;
top: 0px;
background: #ffffff;
border: 1px solid #d9d9d9;
box-sizing: border-box;
border-radius: 4px;
}
Update:
I also attempted using InputAdornment but the icon still does not show up.
<FormControl className='searchOrder'>
<InputLabel htmlFor='input-with-icon-adornment'></InputLabel>
<input
className='form-control'
type='text'
id='input-with-icon-adornment'
placeholder='Search order'
aria-label='Search'
value={this.number}
input={<Input />}
onChange={this.handleChangeOrderNumber}
startAdornment={
<InputAdornment position='start'>
<SearchIcon />
</InputAdornment>
}
/>
</FormControl>