Tengo este texto e ícono que están muy lejos el uno del otro

¿Cómo puedo poner el icono en el lado derecho del texto? Algo como esto:

 Water Jug->

Codesandbox: https://codesandbox.io/s/responsivestack-material-demo-forked-330ogi?file=/demo.js

Códigos:

 <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }} > {product && product.map((item, i) => ( <Grid item xs={2} sm={4} md={4} key={i}> <Stack direction="row" spacing={2}> <ListItemText primary={item.prodName} /> <ListItemIcon> <ArrowForwardIcon style={{ marginLeft: "1px" }} /> </ListItemIcon> </Stack> </Grid> ))} </Grid>