How to change size and color of a material ui icon?

Question

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!!

Answer 1

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} />

Answer 2

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 .