I want this icon to show up in the middle of the Material UI chip, nice and centered. Right now there's a weird whitespace next to it:

<Chip
  avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
  size="small"
  variant="outlined" 
/>

export function LinkAvatarImage({ socialTypeId } : { socialTypeId: number }) {
  if (socialTypeId === socialTypes.PERSONAL_WEBSITE) {
    return <WebIcon />;
  }
...

I don't know how to tweak Material UI's Chip to do so.

I tried this but no luck:

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    chip: {
      alignItems: 'center',
      justifyContent: 'center',
    }
  }),
);

const classes = useStyles();

<Chip
  avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
  size="small"
  classes={classes.chip}
  variant="outlined" 
/>

but I also don't see a way to inject a custom style via the props on Chip. There doesn't seem to be a property to let me do that in the first place. I think there's a classes prop but I don't understand how to set that in this case.

I want this icon to show up in the middle of the Material UI chip, nice and centered. Right now there's a weird whitespace next to it:

<Chip
  avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
  size="small"
  variant="outlined" 
/>

export function LinkAvatarImage({ socialTypeId } : { socialTypeId: number }) {
  if (socialTypeId === socialTypes.PERSONAL_WEBSITE) {
    return <WebIcon />;
  }
...

I don't know how to tweak Material UI's Chip to do so.

I tried this but no luck:

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    chip: {
      alignItems: 'center',
      justifyContent: 'center',
    }
  }),
);

const classes = useStyles();

<Chip
  avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
  size="small"
  classes={classes.chip}
  variant="outlined" 
/>

but I also don't see a way to inject a custom style via the props on Chip. There doesn't seem to be a property to let me do that in the first place. I think there's a classes prop but I don't understand how to set that in this case.

• javascript
• css
• reactjs
• material-ui

4 Answers 4

use display: flex

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    chip: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }
  }),
);

const classes = useStyles();

<Chip
  avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
  size="small"
  classes={classes.chip}
  variant="outlined" 
/>

@Techuila (thanks!) helped me in a bit of the direction. Here is what worked for me:

<Chip
  ...
  style={{
    width: '40px',
    height: '30px',
    paddingLeft: '15px',
    margin: '5px'
   }}
/>

it's an inline style but at this point who cares, it works.

There are padding-left and padding-right CSS settings inside the MuiChip-label style definition that cause that unwanted effect.

To center the avatar (or an icon) you can try to use the sx syntax to set that padding value to 0.

<Chip
  avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
  size="small"
  variant="outlined"
  sx={{'& .MuiChip-label': {padding: 0}}}
/>

I had the same problem too, my workaround is I added a style on my own css file that selects the MuiChip-icon.

App.css

.MuiChip-avatar {
  width: 24px;
  height: 24px;
  margin-left: 5px;
  margin-right: -6px;
}

I also think that I missed something but for now I still use this solution.