1

I use materiel-UI icon

<ArrowRightAlt/>

I can control the size of the icon by fontSize

<ArrowRightAlt fontSize="large" />

But I want v size to depend on window size (like md,xs,sm)

Can this be done?

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
Yoel
  • 7,555
  • 6
  • 27
  • 59

1 Answers1

0

Below is one way of doing this using Box. I'm changing color in addition to font-size just to make it easier to tell which breakpoint it is at.

import React from "react";
import ArrowRightAlt from "@material-ui/icons/ArrowRightAlt";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <Box
      clone
      color={{ xs: "red", sm: "orange", md: "yellow", lg: "green", xl: "blue" }}
      fontSize={{ sm: 48, md: 96, lg: 192, xl: 384 }}
    >
      <ArrowRightAlt />
    </Box>
  );
}

Edit dynamic icon size

Related documentation:

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198