How to display inline icons in menu items?

Question

Problem

Here is my select menu after selection. The problem is the icon (the question mark inside speech bubble) appears on a different line from the text ("Question").

Fig. 1. Menu after selection. Icon and text are display:block;

Goal

I want the style after selection to be an inline display. Similar to the way the menu displays the options pre-selection.

Fig. 2. Open menu pre-selection. Icon and text are display:inline;

Code

Here's the code.

 const typeConfig = [ { value : 'bug' , label : 'Bug report' , icon : 'bug_report' , } , { value : 'positive' , label : 'Positive review' , icon : 'thumb_up' , } , { value : 'negative' , label : 'Negative review' , icon : 'thumb_down' , } , { value : 'question' , label : 'Question' , icon : 'contact_support' , } , { value : 'comment' , label : 'Comment' , icon : 'comment' , } , { value : 'suggestion' , label : 'Suggestion' , icon : 'feedback' , } , { value : 'request' , label : 'Feature request' , icon : 'touch_app' , } , ] <FormControl variant="outlined" fullWidth> <InputLabel ref={inputLabel} htmlFor="select">{typeLabel}</InputLabel> <Select value={type} onChange={handleChangeType} input={<OutlinedInput labelWidth={labelWidth} name="select" id="select" />} > { typeConfig.map( item => <MenuItem key={item.value} value={item.value}> <ListItemIcon> <Icon>{item.icon}</Icon> </ListItemIcon> <Typography variant="inherit" display="inline" noWrap>{item.label}</Typography> </MenuItem> )} </Select> </FormControl> 

Answer 1

Summary from comments

I'm using tailwind. So I successfully added the inline styles as follows.

<ListItemIcon className="inline">
  <Icon>{item.icon}</Icon>
</ListItemIcon>
<Typography className="inline" variant="inherit" display="inline" noWrap>    
  {item.label}
</Typography>