Поместите значок Material-ui в круговой индикатор прогресса

Question

Я хотел бы использовать круговой индикатор прогресса из Material-UI в заголовке моего приложения. Но я просто не знаю, как правильно разместить значок загрузки из Material Icons внутри, чтобы индикатор выполнения перемещался вокруг значка. Вот что у меня сейчас:

и я хочу добиться этого:

Я пытался разместить иконку с абсолютным позиционированием, но, вероятно, есть лучшая идея

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"));