@mui/icons-material#ArrowForward TypeScript Examples

The following examples show how to use @mui/icons-material#ArrowForward. 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: BrowseComponentsCTA.tsx    From fluttertemplates.dev with MIT License 5 votes vote down vote up 
export default function BrowseComponentsCTA() {
  const theme = useTheme();

  return (
    <div
      style={{
        backgroundColor: `${theme.palette.secondary.main}20`,
        marginTop: "10rem",
        marginBottom: "10rem",
        padding: "2rem",
        borderRadius: "0.5rem",
      }}
    >
      <Grid
        container
        direction="row"
        justifyContent="center"
        alignItems="center"
        spacing={4}
      >
        <Grid item xs={12} md={6}>
          <Typography
            variant="h2"
            style={{
              fontSize: "1.8rem",
              fontWeight: "bold",
            }}
          >
            Explore production ready Flutter Widgets and Templates
          </Typography>
        </Grid>

        <Grid
          item
          xs={12}
          md={6}
          style={{
            display: "flex",
            justifyContent: "center",
          }}
        >
          <CustomContainedButton
            label="Browse Widgets"
            href="/widgets"
            endIcon={<ArrowForward fontSize="small" />}
          />
        </Grid>
      </Grid>
    </div>
  );
}
Example #2
Source File: Hero.tsx    From fluttertemplates.dev with MIT License 4 votes vote down vote up 
function HeroSection(props: any) {
  const theme = useTheme();

  return (
    <Grid
      container
      justifyContent="center"
      alignItems="center"
      style={{
        width: "100%",
      }}
    >
      <Grid
        item
        md={7}
        style={{
          margin: "2rem auto",
        }}
      >
        <Grid
          container
          direction="column"
          justifyContent="center"
          alignItems="flex-start"
          spacing={4}
          style={{
            padding: "2rem",
          }}
        >
          <Grid>
            <Typography
              variant="h1"
              style={{
                fontWeight: "bolder",
                fontSize: "2.4rem",
                color: theme.palette.secondary.main,
              }}
            >
              Production-ready
            </Typography>
            <Typography
              variant="h1"
              style={{
                fontWeight: "bold",
                fontSize: "2.9rem",
              }}
            >
              Flutter UI Templates
            </Typography>
          </Grid>

          <Grid
            style={{
              marginTop: "2rem",
              marginBottom: "2rem",
            }}
          >
            <Typography variant="h6">
              A collection of production-ready open source Flutter UI Templates
              and Widgets.
            </Typography>
          </Grid>

          <Grid
            container
            spacing={2}
            direction="row"
            justifyContent="flex-start"
            alignItems="center"
          >
            <Grid item>
              <CustomContainedButton
                href="/widgets"
                label="Browse Widgets"
                endIcon={<ArrowForward fontSize="small" />}
              />
            </Grid>
            <Grid item>
              <CustomFlatButton
                href="/templates"
                label="Browse Templates"
                bold
              />
            </Grid>
          </Grid>
        </Grid>
      </Grid>

      <Grid item md={5}>
        <img
          src="/home_hero.svg"
          alt="hero"
          style={{
            width: "100%",
            height: "65vh",
            objectFit: "scale-down",
          }}
        />
      </Grid>
    </Grid>
  );
}