Breaking News: Grepper is joining You.com. Read the official announcement!

mui rotate icon on click

YOU.com answered on September 12, 2023 Popularity 5/10 Helpfulness 5/10

answer mui rotate icon on click

mui rotate icon on click

Comment

import React, { useState } from 'react';
import { Icon } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(() => ({
  rotated: {
    transform: 'rotate(180deg)', // Apply rotation CSS
    transition: 'transform 0.3s ease', // Add a transition for a smooth effect
  },
}));

const RotatingIcon = () => {
  const classes = useStyles();
  const [isRotated, setIsRotated] = useState(false);

  const handleClick = () => {
    setIsRotated((prev) => !prev); // Toggle rotation on click
  };

  return (
    <Icon
      className={isRotated ? classes.rotated : ''}
      onClick={handleClick}
    >
      YourIconComponent // Replace with your desired Material-UI icon component
    </Icon>
  );
};

export default RotatingIcon;

Popularity 5/10 Helpfulness 5/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

mui rotate icon on click

Contents

More Related Answers

mui rotate icon on click

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.