I'm using the CircularProgress-Icon from Material ui. I want to change the following attributes:

1. size
2. color.

The relevant code looks like this:

const useStyles = makeStyles({
  button: {
    color: 'white',
    fontSize: 15,
  },
});

<CircularProgress className={classes.button} />

The color works fine, but the resizing doesn't work. I also tried "size: 15" and "height: 15, width: 15". But nothing works. Any suggestions why? Thanks a lot!!

I'm using the CircularProgress-Icon from Material ui. I want to change the following attributes:

1. size
2. color.

The relevant code looks like this:

const useStyles = makeStyles({
  button: {
    color: 'white',
    fontSize: 15,
  },
});

<CircularProgress className={classes.button} />

The color works fine, but the resizing doesn't work. I also tried "size: 15" and "height: 15, width: 15". But nothing works. Any suggestions why? Thanks a lot!!

• javascript
• material-ui

Share Improve this question Follow asked Apr 21, 2021 at 9:01 Ewax_DuEwax_Du 46522 gold badges1414 silver badges2626 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I tried the size but its not working for me...so i did it like this.

const styles = {
  activity: { height: 100, width: 100 },
};

const LoadingIndicator = (props) => {
  return <CircularProgress style={styles.activity} {...props} />;
};

NEW

this works

<CircularProgress {...props} size={30} />

There is a kind of hacky way, which requires you to wrap your circularprogress with a fixed height/width div. Something like this :

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    "& > * + *": {
      marginLeft: theme.spacing(2)
    },
    width: 300,
    height: 300
  }
}));

export default function CircularIndeterminate() {
  const [parentSize, setParentSize] = useState(0);
  const parentRef = useRef(null);

  useEffect(() => {
    const { clientHeight, clientWidth } = parentRef.current;

    setParentSize(Math.min(clientHeight, clientWidth));
  }, []);
  const classes = useStyles();

  return (
    <div className={classes.root} ref={parentRef}>
      <CircularProgress size={0.8 * parentSize} />
    </div>
  );
}

You can play around with it here.

<HomeIcon fontSize="small" />
<HomeIcon />
<HomeIcon fontSize="large" />
<HomeIcon sx={{ fontSize: 40 }} />

Reference: https://mui./material-ui/icons/#size

<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="success" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon sx={{ color: pink[500] }} />

Reference: https://mui./material-ui/icons/#color