[Feature]: Add Responsive CSS For Icons In README

[SamuelBanya]

Describe

I checked your README on your main GitHub page, and noted that there is a section regarding '<IconContext.Provider>' which allows you to provide styling overrides for the icons themselves.

However, for a mobile responsive project made in conjunction with Material UI, how is it possible to make the icons from 'React Icons' to be mobile responsive based on the multiple set page widths?

I thought I could maybe pass in 'sx' props, but it doesn't seem to be the case.

This is a separate case, but this is what I did to adjust the width of a button dynamically via Material UI's width, even though I tried to later apply the same ideas to the 'IconContext.Provider' but it doesn't seem to have dynamic styling in this respect:

        <Grid item xs={4}>
          <IconButton
            sx={{
              width:
              {
                xs: 100,
                sm: 150,
                md: 175,
                lg: 200,
                xl: 225
              },
              height: "85px",
              backgroundColor: "#FFF",
              borderRadius: "15px",
              border: "4px solid #000",
            }}
            aria-label="View current user's Registrees"
          >
            <IconContext.Provider
              value={{ color: "black", size: "50" }}
            >
              <FaClipboard />
            </IconContext.Provider>
          </IconButton>
        </Grid>

This StackOverflow post is the only one that gets close, but doesn't specify how to tap into specific Material UI specific screen widths:

• https://stackoverflow.com/questions/43768629/how-to-scale-large-font-awesome-icons-from-the-react-icons-package?noredirect=1&lq=1

Thanks!

Solution

The README to be updated with mobile responsive ideas.

Minimal sample repository URL

No response

Additional context

No response