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
```