how to add icon to Autocomplete TextField MUI v5 in Reactjs?

Question

Well, I made an autocomplete using the code below and tried to display its icon after selecting each item, but it didn't work!

import { useState } from 'react'
import { TextField,InputAdornment ,Autocomplete,Box} from '@mui/material';
import v1 from './v1.svg';
import  v3 from './v2.svg';
import  v4 from './v3.svg';
import  v4 from './v4.svg';
function App() {
   const [useicon ,setUseicon]=useState(v1);
   const options=[
      {'label':"تتر","icon":v1},
      {'label':"بایننس",'icon':v2},
      {'label':"بی اس دی",'icon':v3},
      {'label':"دای",'icon':v4},
   ]
  return (
   <div>
   
       <Autocomplete
        options={options}
        getOptionLabel={(option) => option.label}
        onChange={(e,value)=>{setUseicon(value['icon'])}}
        sx={{width:"300px"}}
        renderOption={(props, option) => (
          <Box component="li" {...props}>
            <img src={option.icon} style={{width:"50px",height:"50px"}} alt={option.label} />
            {option.label}
          </Box>
        )}
        renderInput={(params) => (
          <TextField
            {...params}
            inputProps={{
              ...params.inputProps,
              startAdornment: <InputAdornment position='end'>
                    <img src={useicon} />
              </InputAdornment>  ,
            }}
          />
        )}
       />
   </div>
 )
}
 export default App;

some notes:

1-All the imports were correct and there is no problem

2-In the same way, the icon is shown in the TextField Component.

3-If there is a typo, know that it was in this post and not in the program itself

Please help because it is very important for me.

score 0 · Answer 1 · answered Oct 09 '22 at 16:38

0

Replace inputProps with InputProps.

InputProps={{
  ...params.InputProps,
  startAdornment: (
    <InputAdornment position='end'>
      <img src={useicon} />
    </InputAdornment>  
  ),
}}

inputProps is the attributes You apply to the input Dom element, but the InputProps is the properties that You assign to the MUI Input element.
More data Here.

answered Oct 09 '22 at 16:38

Hamed Siaban

1,342
1
9
18

thank you ,but found another way! – Ammar Oct 16 '22 at 13:14
@Ammar Please share it – MoonKnight Mar 22 '23 at 11:37

score 0 · Answer 2 · answered May 11 '23 at 13:30

You can use the popupIcon prop available on the Autocomplete component.

<Autocomplete
  options={[]}
  popupIcon={<Chevron />} <-- place svg here
  renderInput={(params) => (
    <TextField {...params} />
  )}
/>

If you need to use it in multiple places you can customize it using the theme file:

MuiAutocomplete: {
  defaultProps: {
    popupIcon: <Chevron />,
  },
  styleOverrides: {
    root: {
     
    },
  },
},

how to add icon to Autocomplete TextField MUI v5 in Reactjs?

2 Answers2