0
# Individual Asset Files
1

2
Material Design Icons provides individual asset files in multiple formats and densities for maximum flexibility in native applications and custom implementations.
3

4
## Capabilities
5

6
### PNG Assets
7

8
High-quality PNG files available in multiple densities for crisp display across all screen types.
9

10
```javascript { .api }
11
/**
12
 * PNG asset path pattern
13
 * @param category - Icon category (action, alert, av, etc.)
14
 * @param density - Screen density or platform target
15
 * @param iconName - Icon name without prefix
16
 * @param color - black or white
17
 * @param size - 18dp, 24dp, 36dp, or 48dp
18
 */
19
const pngPath = `${STATIC_PATH}/{category}/{density}/ic_{iconName}_{color}_{size}dp.png`;
20

21
interface DensityTypes {
22
  "1x_web": "Standard web density (1x)";
23
  "2x_web": "High-density web (2x)";  
24
  "drawable-hdpi": "Android high density (1.5x)";
25
  "drawable-mdpi": "Android medium density (1x)";
26
  "drawable-xhdpi": "Android extra high density (2x)";
27
  "drawable-xxhdpi": "Android extra extra high density (3x)";
28
  "drawable-xxxhdpi": "Android extra extra extra high density (4x)";
29
}
30
```
31

32
**Usage Examples:**
33

34
```javascript
35
const { STATIC_PATH } = require("material-design-icons");
36
const path = require("path");
37

38
// Standard web icon
39
const webIcon = path.join(
40
  STATIC_PATH, 
41
  "action", 
42
  "1x_web", 
43
  "ic_home_black_24dp.png"
44
);
45

46
// High-density web icon
47
const retinaIcon = path.join(
48
  STATIC_PATH,
49
  "action", 
50
  "2x_web", 
51
  "ic_home_black_24dp.png"
52
);
53

54
// Android drawable
55
const androidIcon = path.join(
56
  STATIC_PATH,
57
  "action",
58
  "drawable-xhdpi", 
59
  "ic_home_black_24dp.png"
60
);
61
```
62

63
### SVG Vector Assets
64

65
Scalable vector graphics for infinite scalability without quality loss.
66

67
```javascript { .api }
68
/**
69
 * SVG asset path pattern
70
 * @param category - Icon category
71
 * @param iconName - Icon name without prefix
72
 * @param size - 24px or 48px
73
 */
74
const svgPath = `${STATIC_PATH}/{category}/svg/production/ic_{iconName}_{size}px.svg`;
75
```
76

77
**Usage Examples:**
78

79
```javascript
80
const { STATIC_PATH } = require("material-design-icons");
81
const path = require("path");
82

83
// 24px SVG icon
84
const svg24 = path.join(
85
  STATIC_PATH,
86
  "navigation", 
87
  "svg", 
88
  "production", 
89
  "ic_arrow_back_24px.svg"
90
);
91

92
// 48px SVG icon  
93
const svg48 = path.join(
94
  STATIC_PATH,
95
  "navigation",
96
  "svg", 
97
  "production", 
98
  "ic_arrow_back_48px.svg"
99
);
100

101
// Read SVG content
102
const fs = require("fs");
103
const svgContent = fs.readFileSync(svg24, "utf8");
104
console.log(svgContent); // Complete SVG markup
105
```
106

107
### iOS Assets
108

109
Platform-optimized PNG assets for iOS applications in standard naming conventions.
110

111
```javascript { .api }
112
/**
113
 * iOS asset path pattern
114
 * iOS assets follow Apple's naming conventions with @1x, @2x, @3x suffixes
115
 */
116
const iosPath = `${STATIC_PATH}/{category}/ios/{filename}`;
117

118
interface iOSAssetSizes {
119
  "@1x": "Standard density";
120
  "@2x": "Retina density"; 
121
  "@3x": "Retina HD density";
122
}
123
```
124

125
**Usage Examples:**
126

127
```javascript
128
const { STATIC_PATH } = require("material-design-icons");
129
const path = require("path");
130
const fs = require("fs");
131

132
// List all iOS assets for a category
133
const iosDir = path.join(STATIC_PATH, "action", "ios");
134
const iosAssets = fs.readdirSync(iosDir);
135

136
// Filter for specific icon
137
const homeIcons = iosAssets.filter(filename => 
138
  filename.includes("home") && filename.endsWith(".png")
139
);
140

141
console.log(homeIcons);
142
// Output: ["ic_home_black_1x_ios.png", "ic_home_black_2x_ios.png", ...]
143
```
144

145
### Android Vector Drawables
146

147
Modern Android vector drawable files for API level 21+.
148

149
```javascript { .api }
150
/**
151
 * Android vector drawable path pattern
152
 * Available for Android API level 21 and above
153
 */
154
const vectorPath = `${STATIC_PATH}/{category}/drawable-anydpi-v21/{filename}.xml`;
155
```
156

157
**Usage Examples:**
158

159
```javascript
160
const { STATIC_PATH } = require("material-design-icons");
161
const path = require("path");
162
const fs = require("fs");
163

164
// Android vector drawable
165
const vectorDrawable = path.join(
166
  STATIC_PATH,
167
  "action",
168
  "drawable-anydpi-v21", 
169
  "ic_home_black_24dp.xml"
170
);
171

172
// Read vector drawable XML
173
if (fs.existsSync(vectorDrawable)) {
174
  const xmlContent = fs.readFileSync(vectorDrawable, "utf8");
175
  console.log(xmlContent); // Vector drawable XML
176
}
177
```
178

179
## File Organization
180

181
### Directory Structure
182

183
```
184
material-design-icons/
185
├── action/
186
│   ├── 1x_web/           # Standard web PNGs
187
│   ├── 2x_web/           # High-density web PNGs  
188
│   ├── drawable-hdpi/    # Android hdpi (1.5x)
189
│   ├── drawable-mdpi/    # Android mdpi (1x)
190
│   ├── drawable-xhdpi/   # Android xhdpi (2x)
191
│   ├── drawable-xxhdpi/  # Android xxhdpi (3x)
192
│   ├── drawable-xxxhdpi/ # Android xxxhdpi (4x)
193
│   ├── drawable-anydpi-v21/ # Android vector drawables
194
│   ├── ios/             # iOS optimized PNGs
195
│   └── svg/
196
│       └── production/  # SVG files
197
├── alert/               # Same structure for each category
198
├── av/
199
└── ...                  # 16 total categories
200
```
201

202
### Naming Conventions
203

204
All individual assets follow consistent naming patterns:
205

206
- **PNG**: `ic_{icon_name}_{color}_{size}dp.png`
207
- **SVG**: `ic_{icon_name}_{size}px.svg`  
208
- **iOS**: `ic_{icon_name}_{color}_{density}_ios.png`
209
- **Vector**: `ic_{icon_name}_{color}_{size}dp.xml`
210

211
## Integration Examples
212

213
### React Component
214

215
```javascript
216
import { STATIC_PATH } from "material-design-icons";
217
import path from "path";
218

219
function MaterialIcon({ category, name, size = 24, color = "black", format = "svg" }) {
220
  let iconPath;
221
  
222
  if (format === "svg") {
223
    iconPath = path.join(STATIC_PATH, category, "svg", "production", `ic_${name}_${size}px.svg`);
224
  } else if (format === "png") {
225
    iconPath = path.join(STATIC_PATH, category, "1x_web", `ic_${name}_${color}_${size}dp.png`);
226
  }
227
  
228
  return format === "svg" ? (
229
    <svg width={size} height={size}>
230
      <use xlinkHref={`${iconPath}#icon`} />
231
    </svg>
232
  ) : (
233
    <img src={iconPath} alt={name} width={size} height={size} />
234
  );
235
}
236

237
// Usage
238
<MaterialIcon category="action" name="home" size={24} />
239
```
240

241
### Webpack Asset Processing
242

243
```javascript
244
// webpack.config.js
245
const { STATIC_PATH } = require("material-design-icons");
246

247
module.exports = {
248
  module: {
249
    rules: [
250
      {
251
        test: /\.svg$/,
252
        include: path.join(STATIC_PATH),
253
        use: ["@svgr/webpack", "url-loader"]
254
      }
255
    ]
256
  }
257
};
258
```
259

260
### Build-Time Asset Optimization
261

262
```javascript
263
const { STATIC_PATH } = require("material-design-icons");
264
const path = require("path");
265
const fs = require("fs");
266

267
// Copy only needed icons to reduce bundle size
268
const iconsNeeded = [
269
  { category: "action", name: "home", sizes: [24, 48] },
270
  { category: "navigation", name: "menu", sizes: [24] }
271
];
272

273
iconsNeeded.forEach(({ category, name, sizes }) => {
274
  sizes.forEach(size => {
275
    const svgPath = path.join(
276
      STATIC_PATH, 
277
      category, 
278
      "svg", 
279
      "production", 
280
      `ic_${name}_${size}px.svg`
281
    );
282
    
283
    const destPath = path.join("./dist/icons", `${name}_${size}.svg`);
284
    fs.copyFileSync(svgPath, destPath);
285
  });
286
});
287
```