Place Material-ui icon inside circular progress indicator - reactjs

Question

I would like to use a circular progress indicator from Material-UI in the header of my app.
But I just dont know how to fit nicely a download icon from Material Icons inside so that progress bar will move around the icon. Here is what I have now:
and I want to achieve this:
I tried to place icon with absolute positioning, but probably there is a better idea
import React from "react";
import ReactDOM from "react-dom";
import CircularProgress from "#material-ui/core/CircularProgress";
import Button from "#material-ui/core/Button";
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import IconButton from '#material-ui/core/IconButton';
import VerticalAlignBottomIcon from '#material-ui/icons/VerticalAlignBottom';
function CircularStatic() {
const [completed, setCompleted] = React.useState(0);
React.useEffect(() => {
function progress() {
setCompleted((prevCompleted) =>
prevCompleted >= 100 ? 0 : prevCompleted + 10
);
}
const timer = setInterval(progress, 1000);
return () => {
clearInterval(timer);
};
}, []);
return (
<div>
<Button variant="contained" color="primary">
<CircularProgress variant="static" value={completed} color="inherit">
</CircularProgress>
</Button>
</div>
);
}
function ButtonAppBar() {
return (
<AppBar position="static" style={{ backgroundColor: 'teal' }}>
<Toolbar>
<IconButton edge="start" color="inherit">
<VerticalAlignBottomIcon />
<CircularStatic/>
</IconButton>
</Toolbar>
</AppBar>
);
}
ReactDOM.render(<ButtonAppBar />, document.getElementById("root"));

Answer 1

I customized a little, the Material-UI documentation example here
function CircularProgressWithContent(props) {
return (
<Box position="relative" display="inline-flex">
<CircularProgress />
<Box
top={0}
left={0}
bottom={0}
right={0}
position="absolute"
display="flex"
alignItems="center"
justifyContent="center"
>
<Typography variant="caption" component="div" color="textSecondary">
{props.content}
</Typography>
</Box>
</Box>
);
}
And to use it :
<CircularProgressWithLabel content={<LockOutlinedIcon />} />
It's perfectible but it works well for your use case.