0
# @material-ui/icons
1

2
@material-ui/icons provides Google Material Design icons as React components that integrate seamlessly with Material-UI. The library offers over 1,100 pre-built SVG icons as individual React components, enabling developers to easily incorporate consistent, scalable Material Design iconography into their React applications.
3

4
## Package Information
5

6
- **Package Name**: @material-ui/icons
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install @material-ui/icons @material-ui/core`
10
- **Peer Dependencies**: Requires `@material-ui/core`, `react`, and `react-dom`
11

12
## Core Imports
13

14
```typescript
15
import { AccessAlarm, Add, Delete, Settings } from "@material-ui/icons";
16
```
17

18
For individual imports (recommended for tree-shaking):
19

20
```typescript
21
import AccessAlarm from "@material-ui/icons/AccessAlarm";
22
import Add from "@material-ui/icons/Add";
23
```
24

25
CommonJS:
26

27
```javascript
28
const { AccessAlarm, Add, Delete, Settings } = require("@material-ui/icons");
29
```
30

31
## Basic Usage
32

33
```typescript
34
import React from 'react';
35
import { Add, Delete, Settings } from '@material-ui/icons';
36

37
function MyComponent() {
38
  return (
39
    <div>
40
      <Add color="primary" fontSize="large" />
41
      <Delete color="secondary" />
42
      <Settings style={{ color: '#ff5722' }} />
43
    </div>
44
  );
45
}
46
```
47

48
## Architecture
49

50
@material-ui/icons is built around several key concepts:
51

52
- **Icon Components**: Each icon is a React functional component that wraps Material-UI's SvgIcon
53
- **Style Variants**: Most icons are available in 5 different visual styles (Filled, Outlined, Rounded, Sharp, TwoTone)
54
- **SvgIcon Integration**: All icons leverage Material-UI's SvgIcon component for consistent theming and styling
55
- **Tree-shaking Support**: Individual icon imports minimize bundle size
56
- **TypeScript Support**: Full type definitions for all icon components
57

58
## Icon Variants
59

60
Each base icon is typically available in 5 style variants:
61

62
- **Base/Filled** (e.g., `Add`): Default filled Material Design style
63
- **Outlined** (e.g., `AddOutlined`): Outlined/stroked version with transparent fill
64
- **Rounded** (e.g., `AddRounded`): Rounded corner version for softer appearance
65
- **Sharp** (e.g., `AddSharp`): Sharp corner version for more geometric look
66
- **TwoTone** (e.g., `AddTwoTone`): Two-tone version with primary and secondary colors
67

68
## Capabilities
69

70
### Action Icons
71

72
Common action icons for user interactions like adding, deleting, editing, and navigation.
73

74
```typescript { .api }
75
// Core action icons
76
import Add from "@material-ui/icons/Add";
77
import Delete from "@material-ui/icons/Delete";
78
import Edit from "@material-ui/icons/Edit";
79
import Search from "@material-ui/icons/Search";
80
import Settings from "@material-ui/icons/Settings";
81
import MoreVert from "@material-ui/icons/MoreVert";
82
```
83

84
[Action Icons](./action-icons.md)
85

86
### Navigation Icons
87

88
Icons for navigation, menus, arrows, and directional indicators.
89

90
```typescript { .api }
91
// Navigation and directional icons
92
import ArrowBack from "@material-ui/icons/ArrowBack";
93
import ArrowForward from "@material-ui/icons/ArrowForward";
94
import Menu from "@material-ui/icons/Menu";
95
import Close from "@material-ui/icons/Close";
96
import ExpandMore from "@material-ui/icons/ExpandMore";
97
import ChevronLeft from "@material-ui/icons/ChevronLeft";
98
```
99

100
[Navigation Icons](./navigation-icons.md)
101

102
### Communication Icons
103

104
Icons for communication features like messaging, calls, and social interactions.
105

106
```typescript { .api }
107
// Communication icons
108
import Email from "@material-ui/icons/Email";
109
import Phone from "@material-ui/icons/Phone";
110
import Chat from "@material-ui/icons/Chat";
111
import Message from "@material-ui/icons/Message";
112
import VideoCall from "@material-ui/icons/VideoCall";
113
```
114

115
[Communication Icons](./communication-icons.md)
116

117
### Content Icons
118

119
Icons for content management, file operations, and text editing.
120

121
```typescript { .api }
122
// Content and file icons
123
import FileCopy from "@material-ui/icons/FileCopy";
124
import Save from "@material-ui/icons/Save";
125
import Share from "@material-ui/icons/Share";
126
import CloudDownload from "@material-ui/icons/CloudDownload";
127
import CloudUpload from "@material-ui/icons/CloudUpload";
128
import Folder from "@material-ui/icons/Folder";
129
```
130

131
[Content Icons](./content-icons.md)
132

133
### Toggle Icons
134

135
Icons for toggles, checkboxes, radio buttons, and selection states.
136

137
```typescript { .api }
138
// Toggle and selection icons
139
import CheckBox from "@material-ui/icons/CheckBox";
140
import CheckBoxOutlineBlank from "@material-ui/icons/CheckBoxOutlineBlank";
141
import RadioButtonChecked from "@material-ui/icons/RadioButtonChecked";
142
import RadioButtonUnchecked from "@material-ui/icons/RadioButtonUnchecked";
143
import ToggleOn from "@material-ui/icons/ToggleOn";
144
import ToggleOff from "@material-ui/icons/ToggleOff";
145
```
146

147
[Toggle Icons](./toggle-icons.md)
148

149
### Media & Entertainment Icons
150

151
Icons for media playback, camera functionality, audio controls, and entertainment features.
152

153
```typescript { .api }
154
// Media playback and camera controls
155
import PlayArrow from "@material-ui/icons/PlayArrow";
156
import Pause from "@material-ui/icons/Pause";
157
import VolumeUp from "@material-ui/icons/VolumeUp";
158
import PhotoCamera from "@material-ui/icons/PhotoCamera";
159
import Videocam from "@material-ui/icons/Videocam";
160
import MusicNote from "@material-ui/icons/MusicNote";
161
```
162

163
[Media Icons](./media-icons.md)
164

165
### Places & Location Icons
166

167
Icons for locations, buildings, navigation, and place-based services.
168

169
```typescript { .api }
170
// Location and navigation icons
171
import LocationOn from "@material-ui/icons/LocationOn";
172
import Home from "@material-ui/icons/Home";
173
import Business from "@material-ui/icons/Business";
174
import Restaurant from "@material-ui/icons/Restaurant";
175
import LocalHospital from "@material-ui/icons/LocalHospital";
176
import Directions from "@material-ui/icons/Directions";
177
```
178

179
[Places Icons](./places-icons.md)
180

181
### Devices & Hardware Icons
182

183
Icons for electronic devices, computer hardware, and technology equipment.
184

185
```typescript { .api }
186
// Device and hardware icons
187
import Computer from "@material-ui/icons/Computer";
188
import PhoneAndroid from "@material-ui/icons/PhoneAndroid";
189
import Laptop from "@material-ui/icons/Laptop";
190
import Keyboard from "@material-ui/icons/Keyboard";
191
import Wifi from "@material-ui/icons/Wifi";
192
import Bluetooth from "@material-ui/icons/Bluetooth";
193
```
194

195
[Devices Icons](./devices-icons.md)
196

197
## Types
198

199
All icon components share the same props interface from Material-UI's SvgIcon:
200

201
```typescript { .api }
202
// All icon components inherit from Material-UI's SvgIcon
203
interface SvgIconProps {
204
  /** Node passed into the SVG element */
205
  children?: React.ReactNode;
206
  /** Override or extend the styles applied to the component */
207
  classes?: Partial<SvgIconClassKey>;
208
  /** Custom CSS class name */
209
  className?: string;
210
  /** The color of the component. Supports theme colors. */
211
  color?: 'inherit' | 'primary' | 'secondary' | 'action' | 'disabled' | 'error';
212
  /** The component used for the root node */
213
  component?: React.ElementType;
214
  /** The fontSize applied to the icon. Defaults to 24px. */
215
  fontSize?: 'inherit' | 'default' | 'small' | 'large';
216
  /** Applies a color attribute to the SVG element */
217
  htmlColor?: string;
218
  /** The shape-rendering attribute for controlling rendering quality */
219
  shapeRendering?: string;
220
  /** Custom inline styles */
221
  style?: React.CSSProperties;
222
  /** Provides a human-readable title for the element */
223
  titleAccess?: string;
224
  /** Allows you to redefine coordinates without units inside an SVG element */
225
  viewBox?: string;
226
}
227

228
type SvgIconClassKey = 
229
  | 'root'
230
  | 'colorPrimary'
231
  | 'colorSecondary' 
232
  | 'colorAction'
233
  | 'colorError'
234
  | 'colorDisabled'
235
  | 'fontSizeInherit'
236
  | 'fontSizeSmall'
237
  | 'fontSizeLarge';
238

239
// Every icon component follows this signature
240
type IconComponent = React.ComponentType<SvgIconProps>;
241
```