0
# Material Design Icons
1

2
Material Design Icons is Google's official icon collection providing 932 unique Material Design icons across 16 categories. The package offers multiple consumption methods including web fonts, individual asset files, sprite sheets, and programmatic access to asset paths.
3

4
## Package Information
5

6
- **Package Name**: material-design-icons
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install material-design-icons`
10
- **License**: Apache-2.0
11

12
## Core Imports
13

14
```javascript
15
const { STATIC_PATH } = require("material-design-icons");
16
```
17

18
For ES modules:
19

20
```javascript
21
import { STATIC_PATH } from "material-design-icons";
22
```
23

24
## Basic Usage
25

26
```javascript
27
const { STATIC_PATH } = require("material-design-icons");
28
const path = require("path");
29

30
// Access icon file paths programmatically
31
const actionIconPath = path.join(STATIC_PATH, "action", "svg", "production", "ic_3d_rotation_24px.svg");
32
const fontPath = path.join(STATIC_PATH, "iconfont", "MaterialIcons-Regular.woff2");
33

34
console.log(actionIconPath);
35
console.log(fontPath);
36
```
37

38
For web applications using CDN:
39

40
```html
41
<!-- Web font integration -->
42
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
43
<i class="material-icons">3d_rotation</i>
44
```
45

46
## Architecture
47

48
Material Design Icons is structured as an asset collection with multiple access patterns:
49

50
- **Node.js API**: Simple constant export providing package directory path
51
- **Asset Organization**: Icons categorized into 16 thematic groups
52
- **Multi-Format Support**: PNG (multiple densities), SVG, web fonts, sprites
53
- **Build System**: Gulp-based sprite generation and optimization tools
54
- **Cross-Platform**: iOS, Android, web, and desktop application support
55

56
## Icon Categories
57

58
The collection includes 932 icons organized into these categories:
59
- **action**: User interaction icons (3d_rotation, accessibility, account_balance, etc.)
60
- **alert**: Alert and notification icons (add_alert, error, warning, etc.)
61
- **av**: Audio/video and media icons (play_arrow, pause, volume_up, etc.)
62
- **communication**: Communication icons (call, email, message, etc.)
63
- **content**: Content editing icons (add, clear, copy, etc.)
64
- **device**: Device and hardware icons (battery, bluetooth, wifi, etc.)
65
- **editor**: Text editing icons (format_bold, format_italic, insert_link, etc.)
66
- **file**: File operations icons (attachment, cloud, folder, etc.)
67
- **hardware**: Hardware icons (computer, keyboard, mouse, etc.)
68
- **image**: Image editing icons (brightness, crop, photo, etc.)
69
- **maps**: Maps and location icons (directions, location_on, map, etc.)
70
- **navigation**: Navigation icons (arrow_back, menu, close, etc.)
71
- **notification**: Notification icons (notifications, do_not_disturb, etc.)
72
- **places**: Places icons (business, home, restaurant, etc.)
73
- **social**: Social icons (group, person, share, etc.)
74
- **toggle**: Toggle and selection icons (check_box, radio_button, star, etc.)
75

76
## Capabilities
77

78
### Node.js API
79

80
Programmatic access to the package directory for building custom asset paths.
81

82
```javascript { .api }
83
/**
84
 * Path to the package directory containing all icon assets
85
 */
86
const STATIC_PATH: string;
87
```
88

89
[Node.js API](./nodejs-api.md)
90

91
### Web Font Integration
92

93
Use Material Design Icons as web fonts for easy integration in web applications.
94

95
```css { .api }
96
@font-face {
97
  font-family: 'Material Icons';
98
  font-style: normal;
99
  font-weight: 400;
100
  src: url(MaterialIcons-Regular.woff2) format('woff2');
101
}
102

103
.material-icons {
104
  font-family: 'Material Icons';
105
  font-weight: normal;
106
  font-style: normal;
107
  font-size: 24px;
108
  display: inline-block;
109
}
110
```
111

112
[Web Font Integration](./web-fonts.md)
113

114
### Individual Asset Files
115

116
Access individual icon files in PNG, SVG, and platform-specific formats.
117

118
```javascript { .api }
119
// Asset path patterns
120
const pngPath = `${STATIC_PATH}/{category}/{density}/{filename}`;
121
const svgPath = `${STATIC_PATH}/{category}/svg/production/{filename}`;
122
const iosPath = `${STATIC_PATH}/{category}/ios/{filename}`;
123
```
124

125
[Individual Assets](./individual-assets.md)
126

127
### Sprite Sheets
128

129
Pre-generated CSS and SVG sprite sheets for optimized web delivery.
130

131
```html { .api }
132
<!-- CSS sprite usage -->
133
<link href="sprite-{category}-{color}.css" rel="stylesheet">
134
<div class="icon icon-ic_{icon_name}_{color}_{size}dp"></div>
135

136
<!-- SVG symbol sprite usage -->
137
<svg><use xlink:href="sprite.svg#ic_{icon_name}_24px"></use></svg>
138
```
139

140
[Sprite Sheets](./sprites.md)
141

142
### Build System
143

144
Gulp-based build tools for generating custom sprites and optimizing assets.
145

146
```javascript { .api }
147
// Available Gulp tasks
148
gulp.task('png-sprites');  // Generate PNG sprite sheets
149
gulp.task('svg-sprites');  // Generate SVG sprite sheets and symbols
150
gulp.task('iconjar');      // Generate IconJar integration file
151
gulp.task('default');      // Run all sprite generation tasks
152
```
153

154
[Build System](./build-system.md)