@material-ui/icons APIs
- ExpandMore
- Delete
- Close
- Visibility
- VisibilityOff
- Check
- Add
- Edit
- Search
- ExpandLess
- Settings
- Person
- Info
- Clear
- ExitToApp
- ArrowDropDown
- Home
- GitHub
- Warning
- ArrowBack
- SearchOutlined
- Done
- LocationOn
- PlayArrow
- Apps
- Brightness4
- Brightness7
- Description
- KeyboardArrowDown
- KeyboardArrowLeft
- KeyboardArrowRight
- MoreVert
- LocationCity
- Map
- Image
- AccountCircle
- InfoOutlined
- Create
- Block
- Replay
- AddCircle
- HomeRounded
- GetApp
- ChevronLeft
- ChevronRight
- CloudDownload
- CheckCircleOutline
- Send
- LockOpen
- Cancel
- NavigateNext
- AccountBox
- DragIndicator
- FavoriteBorderOutlined
- AccessTime
- DoneAll
- CheckCircle
- CropFree
- LockOutlined
- Undo
- Dashboard
- People
- PhotoLibrary
- HomeOutlined
- Group
- ArrowDropUp
- Remove
- ArrowUpward
- Save
- ArrowForward
- AttachFile
- Headset
- SignalCellularAlt
- ArrowForwardIos
- PlayCircleFilled
- AccessAlarm
- Adjust
- BarChart
- CloseRounded
- PlayArrowOutlined
- ImageRounded
- MenuBookRounded
- RefreshRounded
- HourglassEmptyOutlined
- Announcement
- Ballot
- QuestionAnswerOutlined
- CloudUpload
- SkipNext
- ArrowRightAlt
- MoreHoriz
- FileCopy
- MenuBook
- Language
- AlternateEmail
- FolderOpen
- Lock
- Pets
- AddCircleRounded
- ExploreRounded
- WbSunnyRounded
- Brightness2Rounded
- DonutLargeRounded
- AssistantRounded
- AccountCircleRounded
- ExitToAppRounded
- VpnKey
- MailOutline
- Smartphone
- DeleteForever
- LanguageOutlined
- Colorize
- SignalCellularConnectedNoInternet2Bar
- SignalCellularConnectedNoInternet0Bar
- SignalCellular4Bar
- DeleteOutline
- NewReleases
- LocalOffer
- Assessment
- Place
- TrendingDown
- ShoppingCart
- Stop
- RotateLeft
- Menu
- Flag
- Forum
- GroupSharp
- InsertEmoticon
- NotificationsActive
- PhoneIphone
- AllInbox
- Comment
- Photo
- PlaylistAddCheck
- CloudUploadRounded
- ExpandMoreOutlined
- History
- PersonOutlineOutlined
- ArrowForwardIosRounded
- ArrowBackIosRounded
- AssignmentOutlined
- VerticalAlignCenterOutlined
- CalendarTodayOutlined
- Error
- PlaylistPlay
- MusicNoteTwoTone
- Portrait
- ExploreOutlined
- DeleteRounded
- EditRounded
- SaveRounded
- CreateNewFolder
- MeetingRoom
- MenuOpenRounded
- MenuRounded
- DateRange
- CallEnd
- Assignment
- KeyboardBackspace
- BluetoothSearching
- CameraAlt
- PlaylistAdd
- Favorite
- Bluetooth
- OpenInBrowser
- Loop
- FileCopyOutlined
- NavigateBefore
- MergeType
- Dvr
- PersonOutline
- PlayCircleFilledWhiteOutlined
- StoreMallDirectoryOutlined
- SupervisedUserCircleOutlined
- MonetizationOn
- OpenInNew
- ArrowDownward
- AddBox
- FilterList
- FirstPage
- LastPage
- ViewColumn
- Notifications
- DriveEta
- LocalTaxi
- Redo
- AccountTree
- TextFields
- SaveAlt
- ThumbDown
- ThumbUp
- LocalPhone
- VolumeUp
- VolumeDown
- Translate
- AddCircleOutlined
- RemoveCircleOutlined
- Router
- RemoveRedEye
- Chat
- Mood
- Mic
OtherRelated APIs
@material-ui/icons#Language JavaScript Examples
The following examples show how to use
@material-ui/icons#Language.
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: MenuPopupButton.js From git-brunching with GNU General Public License v3.0 | 5 votes |
MenuPopupButton = (props) => {
const { restaurant, toBooking, isLoading, getRestaurantMenu, menus } = props;
const [open, setOpen] = React.useState(false);
const restaurantName = restaurant.Name;
const currentRestaurantID = restaurant.ID;
// Show popup
const handleClickOpen = (e) => {
getRestaurantMenu(currentRestaurantID);
// Prevent click from propagating to restaurant card and going straight to booking
e.stopPropagation();
setOpen(true);
}
// Hide popup
const handleClose = (e) => {
// Prevent click from propagating to restaurant card when exiting popup
e.stopPropagation();
setOpen(false);
};
const handlePopupClick = (e) => {
e.stopPropagation();
}
// Takes user to the restaurant's website in a new tab
const handleWebsiteButtonClick = (e) => {
const restaurantWebsite = "https://www.kfc.co.nz/";
window.open(restaurantWebsite, "_blank"); //opens the restaurant's website, currently a dummy link
}
return (
<>
<IconButton
className={style.menuButton}
onClick={(e) => handleClickOpen(e)}>
<MenuBook className={style.menuIcon}/>
</IconButton>
<Dialog fullWidth={true} maxWidth="sm"
open={open} onClose={(e) => handleClose(e)} onClick={handlePopupClick}>
<DialogTitle>
<Typography className={style.menuPopupTitle}>
{restaurantName}
<IconButton
className={style.websiteButton}
onClick={handleWebsiteButtonClick}>
<Language className={style.menuIcon}/>
</IconButton>
</Typography>
</DialogTitle>
<DialogContent>
<Menu menus={menus} isLoading={isLoading}/>
</DialogContent>
<div className={style.menuButtonsContainer}>
<Button variant="outlined" className={style.primaryButton} onClick={handleClose}>Cancel</Button>
<Button variant="outlined" className={style.secondaryButton} onClick={() => toBooking(restaurant)}>Make Booking</Button>
</div>
</Dialog>
</>
);
}