Currently, I am working with MUI version 5.15.0. I have a component called Chip, and my goal is to display the icon after the label on the right side.
I attempted to use the CSS rule - .MuiChip-icon{ order:1 }, but it resulted in too much spacing. Additionally, the icon ended up appearing outside the border.
You can see how the Chip looks after applying the CSS here
To address the issue, I applied some padding using the sx API. However, there was still excessive space between the label and the icon. Here is the updated code:
<Chip
label={"Trip "+props.tripNumber}
variant="outlined"
onClick={handleClick}
icon={<ArrowForwardOutlined />}
sx={{ borderColor: "#0049AF", display: 'flex', paddingRight: "10px" }}
/>