Im trying to bring this - icon closer to the text but i'm not exactly sure how.

When I go into developer mode it shows me this.

I don't know what the purplish stuff means. My end goal is to try to move the icon to the upper right corner of where the "Steve First" box is but I'm not sure how to do that. This is the code where i'm building my list.

<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>

The code display this.