0
# Sprite Sheets
1

2
Material Design Icons provides pre-generated CSS and SVG sprite sheets for optimized web delivery. Sprites reduce HTTP requests and improve loading performance.
3

4
## Capabilities
5

6
### CSS Sprite Sheets
7

8
Pre-generated PNG sprite sheets with accompanying CSS for each category and color combination.
9

10
```css { .api }
11
/**
12
 * CSS sprite integration pattern
13
 * Include category-specific CSS file and use icon classes
14
 */
15
@import url("sprite-{category}-{color}.css");
16

17
.icon {
18
  display: inline-block;
19
  background-repeat: no-repeat;
20
}
21

22
.icon-ic_{icon_name}_{color}_{size}dp {
23
  background-position: /* Generated by sprite CSS */;
24
  width: {size}px;
25
  height: {size}px;
26
}
27
```
28

29
**Usage Examples:**
30

31
```html
32
<!-- Include sprite CSS -->
33
<link href="sprites/css-sprite/sprite-action-black.css" rel="stylesheet">
34

35
<!-- Use sprite icons -->
36
<div class="icon icon-ic_home_black_24dp"></div>
37
<div class="icon icon-ic_search_black_24dp"></div>
38
<div class="icon icon-ic_menu_black_24dp"></div>
39
```
40

41
### SVG Sprite Sheets
42

43
Vector-based sprite sheets with CSS positioning for crisp display at any size.
44

45
```css { .api }
46
/**
47
 * SVG sprite CSS integration
48
 * Requires both CSS file and dimension classes
49
 */
50
@import url("svg-sprite-{category}.css"); 
51

52
.svg-{icon_name}-dims {
53
  width: {size}px;
54
  height: {size}px;
55
}
56
```
57

58
**Usage Examples:**
59

60
```html
61
<!-- Include SVG sprite CSS -->
62
<link href="sprites/svg-sprite/svg-sprite-action.css" rel="stylesheet">
63

64
<!-- Define icon dimensions -->
65
<style>
66
  .svg-ic_home_black_24dp-dims { width: 24px; height: 24px; }
67
</style>
68

69
<!-- Use SVG sprite icons -->
70
<div class="svg-ic_home_black_24dp svg-ic_home_black_24dp-dims"></div>
71
```
72

73
### SVG Symbol Sprites
74

75
Modern SVG symbol sprites using `<use>` element for flexible icon integration.
76

77
```html { .api }
78
/**
79
 * SVG symbol sprite integration
80
 * Most flexible and recommended approach for modern browsers
81
 */
82
<svg class="icon">
83
  <use xlink:href="sprite-{category}-symbol.svg#ic_{icon_name}_{size}px"></use>
84
</svg>
85
```
86

87
**Usage Examples:**
88

89
```html
90
<!-- Basic symbol sprite usage -->
91
<svg class="icon-24">
92
  <use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_home_24px"></use>
93
</svg>
94

95
<!-- With CSS sizing -->
96
<style>
97
  .icon-24 { width: 24px; height: 24px; }
98
  .icon-48 { width: 48px; height: 48px; }
99
</style>
100

101
<svg class="icon-24">
102
  <use xlink:href="sprites/svg-sprite/svg-sprite-navigation-symbol.svg#ic_menu_24px"></use>
103
</svg>
104
<svg class="icon-48">
105
  <use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_search_24px"></use>
106
</svg>
107
```
108

109
### Generated Sprite Files
110

111
The build system generates multiple sprite formats for each category:
112

113
```javascript { .api }
114
interface SpriteFiles {
115
  // CSS sprites (PNG-based)
116
  cssSprites: {
117
    image: `sprite-{category}-{color}.png`;
118
    css: `sprite-{category}-{color}.css`;
119
  };
120
  
121
  // SVG sprites (vector-based)
122
  svgSprites: {
123
    sprite: `svg-sprite-{category}.svg`;
124
    css: `svg-sprite-{category}.css`;  
125
    example: `svg-sprite-{category}.html`;
126
  };
127
  
128
  // SVG symbol sprites (recommended)
129
  svgSymbols: {
130
    sprite: `svg-sprite-{category}-symbol.svg`;
131
    example: `svg-sprite-{category}-symbol.html`;
132
  };
133
}
134
```
135

136
## Advanced Usage Patterns
137

138
### Stacking Symbol Sprites
139

140
Combine multiple icons in a single SVG element for complex graphics.
141

142
```html { .api }
143
<!-- Stacked icons for complex UI elements -->
144
<svg class="stacked-icon">
145
  <use class="background" xlink:href="sprite-toggle-symbol.svg#ic_check_box_outline_blank_24px"></use>
146
  <use class="foreground" xlink:href="sprite-toggle-symbol.svg#ic_check_24px"></use>
147
</svg>
148
```
149

150
**Usage Examples:**
151

152
```html
153
<style>
154
  .stacked-icon {
155
    width: 24px;
156
    height: 24px;
157
  }
158
  
159
  .stacked-icon .background {
160
    fill: #ccc;
161
  }
162
  
163
  .stacked-icon .foreground {
164
    fill: #007bff;
165
    opacity: 0; /* Hidden by default */
166
    transition: opacity 0.2s;
167
  }
168
  
169
  .stacked-icon:hover .foreground {
170
    opacity: 1; /* Show on hover */
171
  }
172
</style>
173

174
<!-- Checkbox with hover effect -->
175
<svg class="stacked-icon" id="checkbox-1">
176
  <use class="background" xlink:href="sprites/svg-sprite/svg-sprite-toggle-symbol.svg#ic_check_box_outline_blank_24px"></use>
177
  <use class="foreground" xlink:href="sprites/svg-sprite/svg-sprite-toggle-symbol.svg#ic_check_24px"></use>
178
</svg>
179
```
180

181
### External SVG Symbol Files
182

183
Reference external symbol files for better caching across pages.
184

185
```html { .api }
186
<!-- External symbol reference (requires polyfill for IE/Edge) -->
187
<svg class="icon">
188
  <use xlink:href="/path/to/sprites/svg-sprite-action-symbol.svg#ic_home_24px"></use>
189
</svg>
190
```
191

192
**Usage Examples:**
193

194
```html
195
<!-- Include svg4everybody polyfill for IE/Edge support -->
196
<script src="https://cdn.jsdelivr.net/npm/svg4everybody@2.1.9/dist/svg4everybody.min.js"></script>
197
<script>svg4everybody();</script>
198

199
<!-- External symbol sprites work across all browsers -->
200
<svg class="nav-icon">
201
  <use xlink:href="/sprites/svg-sprite-navigation-symbol.svg#ic_menu_24px"></use>
202
</svg>
203
<svg class="action-icon">
204
  <use xlink:href="/sprites/svg-sprite-action-symbol.svg#ic_search_24px"></use>
205
</svg>
206
```
207

208
### Build-Time Integration
209

210
```javascript
211
const { STATIC_PATH } = require("material-design-icons");
212
const path = require("path");
213
const fs = require("fs");
214

215
// Copy sprite files to build directory
216
const spriteFiles = [
217
  "sprites/svg-sprite/svg-sprite-action-symbol.svg",
218
  "sprites/svg-sprite/svg-sprite-navigation-symbol.svg",
219
  "sprites/css-sprite/sprite-action-black.css",
220
  "sprites/css-sprite/sprite-action-black.png"
221
];
222

223
spriteFiles.forEach(filePath => {
224
  const src = path.join(STATIC_PATH, filePath);
225
  const dest = path.join("./build", path.basename(filePath));
226
  fs.copyFileSync(src, dest);
227
});
228
```
229

230
## Browser Compatibility
231

232
### CSS Sprites
233
- **Support**: All browsers including IE6+
234
- **Benefits**: Maximum compatibility, single HTTP request per category
235
- **Drawbacks**: Fixed resolution, larger file sizes
236

237
### SVG Sprites  
238
- **Support**: IE9+, all modern browsers
239
- **Benefits**: Vector scaling, smaller file sizes
240
- **Drawbacks**: More complex CSS setup
241

242
### SVG Symbol Sprites
243
- **Support**: IE9+ (with polyfill), all modern browsers
244
- **Benefits**: Most flexible, best performance, infinite scalability
245
- **Drawbacks**: External file references need polyfill for IE/Edge
246

247
## Performance Considerations
248

249
### Sprite Selection Guidelines
250

251
```javascript { .api }
252
/**
253
 * Choose sprite format based on usage patterns
254
 */
255
interface SpriteRecommendations {
256
  "few_icons": "Individual SVG files"; 
257
  "many_icons_same_category": "Category sprite sheet";
258
  "many_icons_mixed_categories": "Combined custom sprite";
259
  "maximum_browser_support": "CSS sprites (PNG)";
260
  "modern_browsers_only": "SVG symbol sprites";
261
}
262
```
263

264
### Optimization Tips
265

266
1. **CSS Sprites**: Best for legacy browser support, use for high-traffic sites
267
2. **SVG Symbols**: Recommended for modern applications, best balance of flexibility and performance  
268
3. **Category-specific**: Only load sprites for categories you actually use
269
4. **Custom builds**: Generate custom sprites with only needed icons using the build system