material ui autoComplete with icons
I want to share maybe a new spin off of this solution that is based of the autocomplete example in the documentation (autocomplete demos). Keeps the image in the selected tag as well.
<Autocomplete multiple limitTags={2} id="multiple-limit-tags" options={top100Films} getOptionLabel={(option) => option.title} defaultValue={[top100Films[13], top100Films[12], top100Films[11]]} renderTags={options => { return ( options.map(option => <Fragment> <IconButton color="primary"> <img src={'../src/img/Tables.svg'}/> {/*Mock image, attribute in option*/} </IconButton> {option.title} </Fragment>)) }} renderOption={option => { return ( <Fragment> <IconButton color="primary"> <img src={'../src/img/Tables.svg'}/> {/*Mock image, attribute in option*/} </IconButton> {option.title} </Fragment> ); }} renderInput={(params) => ( <TextField {...params} variant="outlined" label="limitTags" placeholder="Favorites" /> )} />