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

Answer 1

我定制了一点，Material-UI 文档示例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>
    );
}

并使用它：

 <CircularProgressWithLabel content={<LockOutlinedIcon />} />

它是完美的，但它适用于您的用例。