Icon Rotator

Use the IconRotator component to rotate icons or other components using a simple transform transition.

Simple Example

The default behavior will be to rotate from 0deg to 180deg when the rotated prop is true.

"use client";

import { Button } from "@react-md/core/button/Button";
import { IconRotator } from "@react-md/core/icon/IconRotator";
import { useToggle } from "@react-md/core/useToggle";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  const { toggled, toggle } = useToggle();
  return (
    <>
      <Button onClick={toggle}>Toggle</Button>
      <IconRotator rotated={toggled}>
        <FavoriteIcon />
      </IconRotator>
    </>
  );
}

"use client";

import { Button } from "@react-md/core/button/Button";
import { IconRotator } from "@react-md/core/icon/IconRotator";
import { useToggle } from "@react-md/core/useToggle";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  const { toggled, toggle } = useToggle();
  return (
    <>
      <Button onClick={toggle}>Toggle</Button>
      <IconRotator rotated={toggled}>
        <FavoriteIcon />
      </IconRotator>
    </>
  );
}

Custom Rotation

The rotation can be changed by updating the core.$icon-rotate-from and core.$icon-rotate-to Sass variables or updating the --rmd-icon-rotate-from and --rmd-icon-rotate-to custom properties using the core.icon-set-var mixin.

"use client";

import { Box } from "@react-md/core/box/Box";
import { Button } from "@react-md/core/button/Button";
import { IconRotator } from "@react-md/core/icon/IconRotator";
import { useToggle } from "@react-md/core/useToggle";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

import styles from "./CustomRotationExample.module.scss";

export default function CustomRotationExample(): ReactElement {
  const { toggled, toggle } = useToggle();

  return (
    <Box disablePadding className={styles.container}>
      <Button onClick={toggle}>Toggle</Button>
      <IconRotator rotated={toggled}>
        <FavoriteIcon />
      </IconRotator>
    </Box>
  );
}

"use client";

import { Box } from "@react-md/core/box/Box";
import { Button } from "@react-md/core/button/Button";
import { IconRotator } from "@react-md/core/icon/IconRotator";
import { useToggle } from "@react-md/core/useToggle";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

import styles from "./CustomRotationExample.module.scss";

export default function CustomRotationExample(): ReactElement {
  const { toggled, toggle } = useToggle();

  return (
    <Box disablePadding className={styles.container}>
      <Button onClick={toggle}>Toggle</Button>
      <IconRotator rotated={toggled}>
        <FavoriteIcon />
      </IconRotator>
    </Box>
  );
}

@use "everything";

.container {
  @include everything.icon-set-var(rotate-from, 33deg);
  @include everything.icon-set-var(rotate-to, 103deg);
}

@use "everything";

.container {
  @include everything.icon-set-var(rotate-from, 33deg);
  @include everything.icon-set-var(rotate-to, 103deg);
}