I found a solution to the problem I was stuck on, and here's how I worked it out:
You can use the badgeContent property to display content as a badge.
import CheckIcon from '@material-ui/icons/Check'
<Badge
color="secondary"
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
badgeContent={<CheckIcon style={{ fontSize: 10, padding: 0, color: 'white' }} />}
classes={{ badge: classes.badge }}
>
<Avatar className={classes.orangeAvatar}>AP</Avatar>
</Badge>
Once you've added the badge content, you can customize its style like this:
import { Badge } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
badge: {
fontSize: 30
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<Badge
badgeContent={"h"}
color="secondary"
classes={{ badge: classes.badge }}
/>
</div>
);
}
If you need to change the size of the badge, you can apply styles like this:
badge: {
fontSize: 16,
padding: 0,
minWidth: '12px !important',
height: '12px !important',
},
If you want more information on customizing badge content, check out How to change font size of material ui badge content in reactjs?.