@material-ui/icons#AccountCircle TypeScript Examples

The following examples show how to use @material-ui/icons#AccountCircle. 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: LoginIcon.tsx    From cognitive-search-static-web-apps-sample-ui with MIT License 6 votes vote down vote up 
render(): JSX.Element {

        const state = this.props.state;

        return (<>

            <Button color={state.isLoggedInAnonymously ? "secondary" : "inherit"}
                onClick={evt => state.menuAnchorElement = evt.currentTarget}
            >
                <Tooltip title={state.isLoggedInAnonymously ? "ANONYMOUS" : state.userName}>
                    <AccountCircle />
                </Tooltip>
            </Button>

            <Menu
                anchorEl={state.menuAnchorElement}
                open={!state.isLoggedInAnonymously && !!state.menuAnchorElement}
                onClose={() => state.menuAnchorElement = undefined}
            >
                <MenuItem onClick={() => state.logout()}>Login under a different name</MenuItem>
            </Menu>
            
        </>);
    }
Example #2
Source File: UserActions.tsx    From dashboard with Apache License 2.0 5 votes vote down vote up 
function UserActions({ logOut, userActionsVisible, toggleUserActions }: Props) {
  const user = useSelector(selectUser)
  const dispatch = useDispatch()
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget)
  }
  const handleMenu = () => {
    setAnchorEl(null)
    if (user) dispatch(logOut)
    else window.location.href = "/#login"
  }

  return (
    <>
      <IconButton
        data-name={"menuButton"}
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        {user ? (
          <Avatar src={user._json.avatar_url} alt="User Avatar" />
        ) : (
          <AccountCircle />
        )}
      </IconButton>

      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleMenu}
      >
        <MenuItem data-name={"loginLogout"} onClick={handleMenu}>
          {user ? "Logout" : "Login"}
        </MenuItem>
      </Menu>
    </>
  )
}