CODEWITHSUNDEEP
reactjstypescriptreact-hooksmaterial-uicss-animations
Mahesh
Mahesh

Reputation: 1635

How to rotate material-ui icon

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.

Upvotes: 12

Views: 39501

Answers (3)

NorahKSakal
NorahKSakal

Reputation: 894

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)",
      },
    },
  }}
/>

Upvotes: 20

Martin Devillers
Martin Devillers

Reputation: 18002

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>
  );
}

Upvotes: 6

vladmihaisima
vladmihaisima

Reputation: 2248

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

Upvotes: 4

Related Questions