MenuItem icons are not lined up, can not use flex to move icon

[29er]

Steps to reproduce

I am unable to get these icons to align right( flex-end)

Steps:

                <MenuItem onClick={() => updateRankings(selectedOption!, 2)}>
                    <Typography variant="body2" color="text.secondary">
                        {getRankLabel(2)}
                    </Typography>

                    <StarHalf style={{ color: 'rgba(255, 168, 0, 1)' }}/>
                </MenuItem>
                <MenuItem onClick={() => updateRankings(selectedOption!, 3)}>
                    
                    <Typography variant="body2" color="text.secondary">
                       {getRankLabel(3)}
                    </Typography>
                        <StarBorderOutlined style={{ color: 'rgba(255, 168, 0, 1)', alignSelf: 'flex-end' }} />
                       
                </MenuItem>

Current behavior

Expected behavior

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: mui icons , cant align

[siriwatknp]

The MenuItem is a flexbox, there are several options:

1. add flex: 1 to the Typography to stretch the text: <Typography sx={{ flex: 1 }}>
2. add margin left: "auto" to the Star: <Star sx={{ ml: 'auto' }}>
3. follow the demo https://mui.com/material-ui/react-menu/#icon-menu