Reactjs 将物料ui图标放置在循环进度指示器内

我想在我的应用程序标题中使用Material UI中的循环进度指示器。 但我只是不知道如何很好地适应一个下载图标从材料图标内，以便进度条将围绕图标移动。以下是我现在拥有的：

我想做到这一点：

我试图用绝对定位来放置图标，但可能有更好的主意

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/CircularProgress”导入CircularProgress；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/VerticalAlignBottom”导入VerticalAlignBottomIcon；
函数循环静态（）{
const[completed，setCompleted]=React.useState（0）；
React.useffect（（）=>{
功能进展（）{
setCompleted（（prevCompleted）=>
prevCompleted>=100？0:prevCompleted+10
);
}
常数计时器=设置间隔（进度，1000）；
return（）=>{
清除间隔（计时器）；
};
}, []);
返回(
);
}
函数ButtonAppBar（）{
报税表（
);
}
render（，document.getElementById（“根”））我自定义了一点，材质UI文档示例


function CircularProgressWithContent（道具）{
返回(
{props.content}
);
}
我定制了一点，材质UI文档示例


function CircularProgressWithContent（道具）{
返回(
{props.content}
);
}
相关答案：相关答案：这很有帮助。但是对于我的用例，我省略了
display=“inline flex”
这有帮助。但是对于我的用例，我省略了
display=“inline flex”