https://i.stack.imgur.com/biTxp.png
Regrettably, trying to pass a children prop in the manner you have done will not function correctly with material-ui's Icon component. This component anticipates that the children should be the name of the icon font ligature.
An alternative approach could involve creating a custom component tailored to your specific needs - perhaps a ModeCommentIconWithNumber component? This custom component could come with predefined styles for positioning its icon and number elements.
The code snippet below provides a starting point for achieving your desired outcome. You can customize this component by incorporating features such as accepting an icon prop for rendering or a color prop to specify the icon's color.
...
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>
);
}
https://codesandbox.io/s/cool-monad-xo5r3?fontsize=14&hidenavigation=1&theme=dark