@material-ui/icons#Map JavaScript Examples

The following examples show how to use @material-ui/icons#Map. 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: Home.js    From pwa with MIT License 6 votes vote down vote up 
buttons = [
  {
    icon: <Person style={{ color: '#00ffba' }} />,
    name: 'me',
    link: '/my-activities',
  },
  {
    icon: <Group style={{ color: '#00ffba' }} />,
    name: 'family',
    link: '/family-activities',
  },
  {
    icon: <Map style={{ color: '#f1e200' }} />,
    name: 'map',
    link: '/map',
  },
  {
    icon: <Assignment style={{ color: '#f1e200' }} />,
    name: 'informing',
    link: '/informing',
  },
  // {
  //     icon: <Room style={{color: "#ff006f"}}/>,
  //     name: "places",
  //     link: "/places",
  // },
  // {
  //     icon: <Info style={{color: "#ff006f"}}/>,
  //     name: "about-us",
  //     link: "/about-us",
  // },
]
Example #2
Source File: Navigation.js    From pwa with MIT License 6 votes vote down vote up 
routes = [
  {
    to: '/home',
    label: 'خانه',
    icon: <Home />,
  },
  {
    to: '/map',
    label: 'نقشه',
    icon: <Map />,
  },
  {
    to: '/my-activities',
    label: 'من',
    icon: <Person />,
  },
  {
    to: '/family-activities',
    label: 'خانواده',
    icon: <People />,
  },
  {
    to: '/informing',
    label: 'آگاهی‌بخشی',
    icon: <Assignment />,
  },
]
Example #3
Source File: footer.js    From turinghut-website with BSD Zero Clause License 5 votes vote down vote up 
footerItems = [
  {
    title: 'Find us on Maps',
    icons: [
      {
        title: 'Maps',
        icon: <Map />,
        route: 'https://goo.gl/maps/KbMkmqUWmUVQpfCv9',
      },
    ],
  },
  {
    title: 'Contact us',
    icons: [
      {
        title: 'Email',
        icon: <Email />,
        route: 'mailto:[email protected]',
      },
      {
        title: 'Phone',
        icon: <LocalPhone />,
        route: 'tel: 040-2304-2760',
      },
    ],
  },
  {
    title: 'Follow us',
    icons: [
      {
        title: 'Github',
        icon: <GitHub />,
        route: 'https://github.com/turinghut',
      },
      {
        title: 'instagram',
        icon: <Instagram />,
        route: 'https://www.instagram.com/turing.hut/',
      },
    ],
  },
]
Example #4
Source File: MainAppBar.js    From landlord with MIT License 4 votes vote down vote up 
export default function MainAppBar(props) {
  const classes = useStyles();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = (variant) => {
    setMobileOpen(variant === "temporary" && !mobileOpen);
  };

  const drawer = (variant) => (
      <div>
        <div className={classes.toolbar}/>
        <Divider/>
        <List component="nav">
          <ListItem button component={Link} to="/" onClick={() => handleDrawerToggle(variant)} key={"/"}>
            <ListItemIcon><Home/></ListItemIcon>
            <ListItemText primary="Home"/>
          </ListItem>

          <ListItem button component={Link} to="/out-of-omaha" onClick={() => handleDrawerToggle(variant)} key={"/out-of-omaha"}>
            <ListItemIcon><LocationCity/></ListItemIcon>
            <ListItemText primary="Out of Omaha"/>
          </ListItem>
          <List component="div" disablePadding dense>
            <ListItem className={classes.nested} button component={Link} to="/out-of-omaha/map" onClick={() => handleDrawerToggle(variant)} key={"/out-of-omaha/map"}>
              <ListItemIcon><Place/></ListItemIcon>
              <ListItemText primary="Out of Omaha Map"/>
            </ListItem>
          </List>

          <ListItem button component={Link} to="/out-of-state" onClick={() => handleDrawerToggle(variant)} key={"/out-of-state"}>
            <ListItemIcon><Map/></ListItemIcon>
            <ListItemText primary="Out of State"/>
          </ListItem>
          <List component="div" disablePadding dense>
            <ListItem className={classes.nested} button component={Link} to="/out-of-state/map" onClick={() => handleDrawerToggle(variant)} key={"/out-of-state/map"}>
              <ListItemIcon><Place/></ListItemIcon>
              <ListItemText primary="Out of State Map"/>
            </ListItem>
          </List>

          <ListItem button component={Link} to="/low-condition" onClick={() => handleDrawerToggle(variant)} key={"/low-condition"}>
            <ListItemIcon><TrendingDown/></ListItemIcon>
            <ListItemText primary="Low Condition"/>
          </ListItem>
          <List component="div" disablePadding dense>
            <ListItem className={classes.nested} button component={Link} to="/low-condition/map" onClick={() => handleDrawerToggle(variant)} key={"/low-condition/map"}>
              <ListItemIcon><Place/></ListItemIcon>
              <ListItemText primary="Low Condition Map"/>
            </ListItem>
          </List>

          <ListItem button component={Link} to="/about" onClick={() => handleDrawerToggle(variant)} key={"/about"}>
            <ListItemIcon><Info/></ListItemIcon>
            <ListItemText primary="About"/>
          </ListItem>
        </List>
      </div>
  );

  return (
      <div className={classes.root}>
        <CssBaseline/>
        <AppBar position="fixed" className={classes.appBar}>
          <Toolbar>
            <IconButton
                color="inherit"
                aria-label="open drawer"
                edge="start"
                onClick={() => handleDrawerToggle("temporary")}
                className={classes.menuButton}
            >
              <MenuIcon/>
            </IconButton>
            <img src="/landlord/favicon.png" alt="logo" className={classes.logo} width={30} height={30}/>
            <Typography variant="h6" noWrap>
              Landlords of Omaha
            </Typography>
          </Toolbar>
        </AppBar>
        <nav className={classes.drawer}>
          <Hidden mdUp implementation="css">
            <Drawer
                variant="temporary"
                anchor="left"
                open={mobileOpen}
                onClose={() => handleDrawerToggle("temporary")}
                classes={{
                  paper: classes.drawerPaper,
                }}
                ModalProps={{
                  keepMounted: true, // Better open performance on mobile.
                }}
            >
              {drawer("temporary")}
            </Drawer>
          </Hidden>
          <Hidden smDown implementation="css">
            <Drawer
                classes={{
                  paper: classes.drawerPaper,
                }}
                variant="permanent"
                open
            >
              {drawer("permanent")}
            </Drawer>
          </Hidden>
        </nav>
        <div className={classes.contentWrapper}>
          <div className={classes.toolbar}/>
          <main className={classes.main}>
            {props.children}
          </main>

          <footer className={classes.footer}>
            <div className={classes.footerBody}>
              <Typography variant="body2" component="p">Learn more about this project:</Typography>
              <Box display="flex" justifyContent="center">
                <Box m={1} p={1}>
                  <a className={classes.footerLink} rel="noreferrer" target="_blank" href="https://codefornebraska.slack.com/messages/housing"><Icon icon={slackIcon} width="36" height="36"/></a>
                </Box>
                <Box m={1} p={1}>
                  <a className={classes.footerLink} rel="noreferrer" target="_blank" href="https://github.com/codefornebraska/landlord"><Icon icon={githubIcon} width="36" height="36"/></a>
                </Box>
              </Box>
            </div>
            <div className={classes.footerCopyright}>
              <Typography variant="body2">
                {`Copyright © `}
                <a className={classes.footerLink}  rel="noreferrer" target="_blank" href="https://www.codefornebraska.org/">Code for Nebraska</a>
                {` ${new Date().getFullYear()}`}
              </Typography>
            </div>
          </footer>
        </div>
      </div>
  );
}