0
# Navigation Icons
1

2
Icons for navigation, menus, arrows, directional indicators, and app navigation patterns.
3

4
## Capabilities
5

6
### Directional Arrows
7

8
Basic directional arrows for navigation and movement indication.
9

10
```typescript { .api }
11
// Basic arrow directions
12
import ArrowBack from "@material-ui/icons/ArrowBack";
13
import ArrowForward from "@material-ui/icons/ArrowForward";
14
import ArrowUpward from "@material-ui/icons/ArrowUpward";
15
import ArrowDownward from "@material-ui/icons/ArrowDownward";
16
import ArrowLeft from "@material-ui/icons/ArrowLeft";
17
import ArrowRight from "@material-ui/icons/ArrowRight";
18

19
// Outlined variants
20
import ArrowBackOutlined from "@material-ui/icons/ArrowBackOutlined";
21
import ArrowForwardOutlined from "@material-ui/icons/ArrowForwardOutlined";
22
```
23

24
### Chevron Arrows
25

26
Subtle chevron-style arrows typically used for expandable content and subtle navigation.
27

28
```typescript { .api }
29
// Chevron navigation arrows
30
import ChevronLeft from "@material-ui/icons/ChevronLeft";
31
import ChevronRight from "@material-ui/icons/ChevronRight";
32
import ExpandLess from "@material-ui/icons/ExpandLess";
33
import ExpandMore from "@material-ui/icons/ExpandMore";
34
import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp";
35
import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown";
36
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
37
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
38
```
39

40
### Menu Icons
41

42
Icons for menu toggles, hamburger menus, and menu-related actions.
43

44
```typescript { .api }
45
// Menu and hamburger icons
46
import Menu from "@material-ui/icons/Menu";
47
import MenuOutlined from "@material-ui/icons/MenuOutlined";
48
import MenuOpen from "@material-ui/icons/MenuOpen";
49
import Close from "@material-ui/icons/Close";
50
import CloseOutlined from "@material-ui/icons/CloseOutlined";
51
import Cancel from "@material-ui/icons/Cancel";
52
import ClearOutlined from "@material-ui/icons/ClearOutlined";
53
```
54

55
### App Navigation
56

57
Icons commonly used in app navigation bars, tabs, and drawer navigation.
58

59
```typescript { .api }
60
// Home and main navigation
61
import Home from "@material-ui/icons/Home";
62
import HomeOutlined from "@material-ui/icons/HomeOutlined";
63
import Dashboard from "@material-ui/icons/Dashboard";
64
import DashboardOutlined from "@material-ui/icons/DashboardOutlined";
65
import Apps from "@material-ui/icons/Apps";
66
import AppsOutlined from "@material-ui/icons/AppsOutlined";
67

68
// Tab and page navigation
69
import Tab from "@material-ui/icons/Tab";
70
import TabUnselected from "@material-ui/icons/TabUnselected";
71
import Pages from "@material-ui/icons/Pages";
72
import ViewModule from "@material-ui/icons/ViewModule";
73
import ViewList from "@material-ui/icons/ViewList";
74
import ViewComfy from "@material-ui/icons/ViewComfy";
75
```
76

77
### First/Last Navigation
78

79
Icons for pagination and navigating to first/last items.
80

81
```typescript { .api }
82
// First/Last navigation
83
import FirstPage from "@material-ui/icons/FirstPage";
84
import LastPage from "@material-ui/icons/LastPage";
85
import SkipPrevious from "@material-ui/icons/SkipPrevious";
86
import SkipNext from "@material-ui/icons/SkipNext";
87
import FastRewind from "@material-ui/icons/FastRewind";
88
import FastForward from "@material-ui/icons/FastForward";
89
```
90

91
### Fullscreen and View Controls
92

93
Icons for fullscreen toggles and view mode controls.
94

95
```typescript { .api }
96
// Fullscreen and view controls
97
import Fullscreen from "@material-ui/icons/Fullscreen";
98
import FullscreenExit from "@material-ui/icons/FullscreenExit";
99
import ZoomIn from "@material-ui/icons/ZoomIn";
100
import ZoomOut from "@material-ui/icons/ZoomOut";
101
import ZoomOutMap from "@material-ui/icons/ZoomOutMap";
102
import CenterFocusStrong from "@material-ui/icons/CenterFocusStrong";
103
import CenterFocusWeak from "@material-ui/icons/CenterFocusWeak";
104
```
105

106
**Usage Examples:**
107

108
```typescript
109
import React, { useState } from 'react';
110
import { Menu, Close, ArrowBack, ExpandMore, ExpandLess } from '@material-ui/icons';
111
import { IconButton, Drawer, AppBar, Toolbar, Collapse } from '@material-ui/core';
112

113
// App Bar with navigation
114
function NavigationAppBar() {
115
  const [drawerOpen, setDrawerOpen] = useState(false);
116

117
  return (
118
    <AppBar position="static">
119
      <Toolbar>
120
        <IconButton onClick={() => setDrawerOpen(true)}>
121
          <Menu />
122
        </IconButton>
123
        <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)}>
124
          <IconButton onClick={() => setDrawerOpen(false)}>
125
            <Close />
126
          </IconButton>
127
          {/* Drawer content */}
128
        </Drawer>
129
      </Toolbar>
130
    </AppBar>
131
  );
132
}
133

134
// Back navigation
135
function BackButton({ onBack }) {
136
  return (
137
    <IconButton onClick={onBack}>
138
      <ArrowBack />
139
    </IconButton>
140
  );
141
}
142

143
// Expandable section
144
function ExpandableSection({ title, children }) {
145
  const [expanded, setExpanded] = useState(false);
146

147
  return (
148
    <div>
149
      <div onClick={() => setExpanded(!expanded)}>
150
        {title}
151
        {expanded ? <ExpandLess /> : <ExpandMore />}
152
      </div>
153
      <Collapse in={expanded}>
154
        {children}
155
      </Collapse>
156
    </div>
157
  );
158
}
159

160
// Pagination controls
161
function PaginationControls({ onFirst, onPrev, onNext, onLast }) {
162
  return (
163
    <div>
164
      <IconButton onClick={onFirst}>
165
        <FirstPage />
166
      </IconButton>
167
      <IconButton onClick={onPrev}>
168
        <ChevronLeft />
169
      </IconButton>
170
      <IconButton onClick={onNext}>
171
        <ChevronRight />
172
      </IconButton>
173
      <IconButton onClick={onLast}>
174
        <LastPage />
175
      </IconButton>
176
    </div>
177
  );
178
}
179
```