Estoy tratando de acercar este ícono al texto, pero no estoy exactamente seguro de cómo.

Cuando entro en modo desarrollador me muestra esto.

No sé lo que significa la cosa púrpura. Mi objetivo final es tratar de mover el ícono a la esquina superior derecha de donde está el cuadro "Steve First", pero no estoy seguro de cómo hacerlo. Este es el código donde estoy construyendo mi lista.

 <List style={{ display: "flex", flexDirection: "row", padding: 0 }}> <ListItem className={classes.removePerson} secondaryAction={ <IconButton sx={{ zIndex: "1", width: "15px !important", height: "15px !important" }} > <RemoveCircleIcon sx={{ fontSize: "20px" }} /> </IconButton> } > <ListItemAvatar> <Avatar src="stuff.img" /> </ListItemAvatar> <ListItemText className={classes.peopleListSpacing} primary="Steve First Steve First Steve First" /> </ListItem> <ListItem className={classes.removePerson} secondaryAction={ <IconButton sx={{ zIndex: "1", width: "15px !important", height: "15px !important" }} > <RemoveCircleIcon sx={{ fontSize: "20px" }} /> </IconButton> } > <ListItemAvatar> <Avatar src="stuff.img" /> </ListItemAvatar> <ListItemText className={classes.peopleListSpacing} primary="Steve First" /> </ListItem> </List>

El código muestra esto.