@mui/icons-material#VisibilityRounded TypeScript Examples

The following examples show how to use @mui/icons-material#VisibilityRounded. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: FeaturesSection.tsx    From fluttertemplates.dev with MIT License 4 votes vote down vote up 
export default function FeaturesSection() {
  const theme = useTheme();

  return (
    <Grid
      container
      direction="column"
      justifyContent="center"
      alignItems="center"
      style={{
        marginTop: "2rem",
        marginBottom: "2rem",
        minHeight: "50vh",
      }}
    >
      <Grid item>
        <Typography
          variant="h2"
          style={{
            fontWeight: "bold",
            fontSize: "1.7rem",
            width: "100%",
          }}
        >
          Features
        </Typography>
      </Grid>

      <Grid item>
        <div
          style={{
            width: "80px",
            background: `${theme.palette.secondary.main}50`,
            height: "4px",
            marginTop: "0.5rem",
            marginBottom: "2.5rem",
            borderRadius: "4px",
          }}
        ></div>
      </Grid>
      <Grid
        item
        style={{
          width: "100%",
        }}
      >
        <Grid
          container
          direction="row"
          alignItems="center"
          justifyContent="space-evenly"
          spacing={4}
        >
          <SingleFeature
            title="Completely Null Safe"
            description="All the templates are built with pre configured null safety."
            icon={
              <Code
                color="secondary"
                style={{
                  fontSize: "4rem",
                }}
              />
            }
          />
          <SingleFeature
            title="Readable Code"
            description="All the templates are built keeping code readability in mind."
            icon={
              <VisibilityRounded
                color="secondary"
                style={{
                  fontSize: "4rem",
                }}
              />
            }
          />
          <SingleFeature
            title="Beautiful design"
            description="Showcase the potential of Flutter through beautiful UI designs."
            icon={
              <BrushRounded
                color="secondary"
                style={{
                  fontSize: "4rem",
                }}
              />
            }
          />
        </Grid>
      </Grid>
    </Grid>
  );
}