Issue
Upon selecting an option from the menu, I encounter a problem where the icon (represented by a question mark inside a speech bubble) appears on a different line than the text ("Question").
Fig. 1. Display of menu after selection with the icon and text being displayed as block elements.https://i.sstatic.net/4Rcw9.png
Objective
The desired outcome is to have the style after selection set to display inline, similar to how the options are displayed in the menu prior to selection.
Fig. 2. Menu displaying options before selection with both icon and text showing as inline elements.https://i.sstatic.net/7V7LE.png
Implementation
Below is the code snippet for reference:
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>