How to show a label together with startAdornment in Multiple Select in Material UI?

Question

I am using the Select with the multiple prop. The component works fine, and the InputLabel renders the renders the following:

However, when I add an icon at the beginning via the startAdornment prop, the InputLabel is moved above the input field.

Do you know how to show the label next do the icon when no values are selected?

The code is:

 <FormControl className={classes.formControl} fullWidth variant="outlined" size="medium">
    <InputLabel name={name} color="secondary" variant="outlined" htmlFor={id} id={id} className={classes.label}>{label}</InputLabel>
    <Select
      name={name}
      labelId={id}
      id={id}
      multiple
      autoWidth
      startAdornment={icon}
      color="secondary"
      value={selectedValues}
      onChange={handleChange}
      renderValue={selectedOptions => (
        <div className={classes.tags}>
          {selectedOptions.map(option => (
            <Chip key={option.value} label={option.label} size="small" className={classes.chipStyle} />
          ))}
        </div>
      )}

    >
      {options.map(option => (

        <MenuItem key={option.value} value={option}>
          <Checkbox checked={logicHere} color="primary" />
          <ListItemText primary={option.label} />
        </MenuItem>
      ))}
    </Select>
  </FormControl>

Answer 1

Did you try ?

<Select 
InputProps={{
    startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
}} />