How to rotate material-ui icon

Question

I'm trying to rotate material-ui icon using css property animation but not getting the desired result. Can somebody please help me identify what's going wrong here?

https://codesandbox.io/s/nifty-nightingale-v8sqh?file=/App.tsx

my expectation is a continuous rotating icon.

Weaponry

Answer 1

You're almost there! You can keep both the rotateIcon style as the @keyframes spin style in the createStyles definition. The trick is to prefix spin with a $-sign so it comes $sign. Then it will work:

import React from "react";
import { Container, createStyles, makeStyles } from "@material-ui/core";
import LoopIcon from "@material-ui/icons/Loop";

export const useStyles = makeStyles(() =>
  createStyles({
    rotateIcon: {
      animation: "$spin 2s linear infinite"
    },
    "@keyframes spin": {
      "0%": {
        transform: "rotate(360deg)"
      },
      "100%": {
        transform: "rotate(0deg)"
      }
    }
  })
);

export default function App() {
  const classes = useStyles();
  return (
    <Container maxWidth="sm">
      <LoopIcon className={classes.rotateIcon} />
    </Container>
  );
}

Saddlery

The '$' before spin: brilliant. thank you. – Disfranchise

Answer 2

Here's an alternative way with the new sx prop, which is new to MUI v5

import LoopIcon from '@mui/icons-material/Loop';
<LoopIcon
  sx={{
    animation: "spin 2s linear infinite",
    "@keyframes spin": {
      "0%": {
        transform: "rotate(360deg)",
      },
      "100%": {
        transform: "rotate(0deg)",
      },
    },
  }}
/>

Yvor

Answer 3

The animation name ("spin" in your initial sandbox) must refer to a set of keyframes.

A direct solution is to define the keyframes directly (not ideal, not neat, not extensible, etc.), see the keyframes in the style tag below.

You might want to check https://styled-components.com/docs/api#keyframes for a more neat solution.

import React from "react";
import { Container, createStyles, makeStyles } from "@material-ui/core";
import LoopIcon from "@material-ui/icons/Loop";

export const useStyles = makeStyles(() =>
  createStyles({
    rotateIcon: {
      animation: "spin 4s linear infinite"
    }
  })
);

export default function App() {
  const classes = useStyles();

  return (
    <Container maxWidth="sm">
      <LoopIcon className={classes.rotateIcon} />
      <style>{`
            @keyframes spin {
                 0% { transform: rotate(360deg); }
                 100% { transform: rotate(0deg); }
            }
        `}</style>
    </Container>
  );
}

https://codesandbox.io/s/practical-fire-6k3cx?file=/App.tsx

Snowplow