Dynamic icon size in Material-UI
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?
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> ); } 
Related documentation:
