Comment écrire du texte sur une icône matérielle

Vous pouvez utiliser badge code> de matériau ui. LINK

<Badge 
  badgeContent={4} 
  anchorOrigin={{
    vertical: 'center',
    horizontal: 'center',
  }} 
  color="white">
   <ModeComment />
</Badge>

Je ne pense pas que MUI fournit une telle personnalisation. Vous pouvez écrire du texte parallèlement à l'icône et l'aligner sur le dessus en utilisant la position absolue.

Malheureusement, en passant un Enfants CODE> Aimez que vous ne fonctionnerez pas pour l'icône code> de Matériel-UI CODE> . Il s'attend à ce que enfants code> soit le nom de la police d'icône ligature. p>

Une solution possible consisterait à créer un composant personnalisé de vos besoins - un modecommensiquewithnumber code> Composant peut-être? Ensuite, il aurait des styles prédéfinis pour positionner son icône et ses éléments numériques. P>

Le code ci-dessous vous aiderait à réaliser ce que vous voulez. Vous pouvez modifier ce composant, comme accepter un icône code> ProP à rendre ou peut-être une couleur Color code> de la couleur de l'icône. P>

...
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    position: "relative",
    display: "inline-flex",
    justifyContent: "center",
    alignItems: "center"
  },
  icon: {
    fontSize: "2.5em"
  },
  count: {
    position: "absolute",
    lineHeight: 1,
    color: "#fff",
    top: "0.5em",
    fontSize: "1em"
  }
});

function ModeCommentIconWithNumber({ size = 16, count = 0 }) {
  const classes = useStyles();

  return (
    <div className={classes.root} style={{ fontSize: size }}>
      <ModeCommentIcon color="primary" className={classes.icon} />
      <Typography component="span" className={classes.count}>
        {count}
      </Typography>
    </div>
  );
}

Ciao, il n'ya aucun moyen de mettre du texte dans l'icône (comme un enfant comme vous l'avez fait). Vous pouvez mettre typographie à l'extérieur de l'icône et utiliser des CSS. Quelque chose comme: xxx

ici un exemple de codesandbox.