0
# Icon Theming and Transformations
1

2
Built-in utility classes for styling, sizing, rotating, flipping, and animating icons. Provides consistent theming and visual effects across all Material Design icons.
3

4
## Capabilities
5

6
### Size Modifier Classes
7

8
Predefined size classes that override the default 24px icon size for different use cases.
9

10
```css { .api }
11
/**
12
 * Size modifier classes for icons
13
 * Applied in combination with base .mdi class
14
 */
15
.mdi-18px.mdi-set,
16
.mdi-18px.mdi:before {
17
  font-size: 18px;
18
}
19

20
.mdi-24px.mdi-set,
21
.mdi-24px.mdi:before {
22
  font-size: 24px;
23
}
24

25
.mdi-36px.mdi-set,
26
.mdi-36px.mdi:before {
27
  font-size: 36px;
28
}
29

30
.mdi-48px.mdi-set,
31
.mdi-48px.mdi:before {
32
  font-size: 48px;
33
}
34
```
35

36
**Usage Examples:**
37

38
```html
39
<!-- Small icons for compact layouts -->
40
<i class="mdi mdi-account mdi-18px"></i>
41

42
<!-- Default size (24px) - no class needed -->
43
<i class="mdi mdi-home"></i>
44

45
<!-- Medium icons for headers -->
46
<i class="mdi mdi-settings mdi-36px"></i>
47

48
<!-- Large icons for emphasis -->
49
<i class="mdi mdi-star mdi-48px"></i>
50
```
51

52
### Color Theme Classes
53

54
Predefined color themes following Material Design guidelines for light and dark interfaces.
55

56
```css { .api }
57
/**
58
 * Dark theme colors for icons
59
 * Suitable for light backgrounds
60
 */
61
.mdi-dark:before {
62
  color: rgba(0, 0, 0, 0.54);
63
}
64

65
.mdi-dark.mdi-inactive:before {
66
  color: rgba(0, 0, 0, 0.26);
67
}
68

69
/**
70
 * Light theme colors for icons  
71
 * Suitable for dark backgrounds
72
 */
73
.mdi-light:before {
74
  color: white;
75
}
76

77
.mdi-light.mdi-inactive:before {
78
  color: rgba(255, 255, 255, 0.3);
79
}
80
```
81

82
**Usage Examples:**
83

84
```html
85
<!-- Dark theme icons (for light backgrounds) -->
86
<div class="light-toolbar">
87
  <i class="mdi mdi-menu mdi-dark"></i>
88
  <i class="mdi mdi-search mdi-dark"></i>
89
  <i class="mdi mdi-settings mdi-dark mdi-inactive"></i>
90
</div>
91

92
<!-- Light theme icons (for dark backgrounds) -->
93
<div class="dark-header">
94
  <i class="mdi mdi-home mdi-light"></i>
95
  <i class="mdi mdi-account mdi-light"></i>
96
  <i class="mdi mdi-notifications mdi-light mdi-inactive"></i>
97
</div>
98
```
99

100
### Rotation Transform Classes
101

102
CSS transform classes for rotating icons by predefined angles, useful for indicating direction or state.
103

104
```css { .api }
105
/**
106
 * Rotation transform classes
107
 * Rotates icons using CSS transforms around their center point
108
 */
109
.mdi-rotate-45:before {
110
  -webkit-transform: rotate(45deg);
111
  -ms-transform: rotate(45deg);
112
  transform: rotate(45deg);
113
}
114

115
.mdi-rotate-90:before {
116
  -webkit-transform: rotate(90deg);
117
  -ms-transform: rotate(90deg);
118
  transform: rotate(90deg);
119
}
120

121
.mdi-rotate-135:before {
122
  -webkit-transform: rotate(135deg);
123
  -ms-transform: rotate(135deg);
124
  transform: rotate(135deg);
125
}
126

127
.mdi-rotate-180:before {
128
  -webkit-transform: rotate(180deg);
129
  -ms-transform: rotate(180deg);
130
  transform: rotate(180deg);
131
}
132

133
.mdi-rotate-225:before {
134
  -webkit-transform: rotate(225deg);
135
  -ms-transform: rotate(225deg);
136
  transform: rotate(225deg);
137
}
138

139
.mdi-rotate-270:before {
140
  -webkit-transform: rotate(270deg);
141
  -ms-transform: rotate(270deg);
142
  transform: rotate(270deg);
143
}
144

145
.mdi-rotate-315:before {
146
  -webkit-transform: rotate(315deg);
147
  -ms-transform: rotate(315deg);
148
  transform: rotate(315deg);
149
}
150
```
151

152
**Usage Examples:**
153

154
```html
155
<!-- Rotated navigation arrows -->
156
<i class="mdi mdi-chevron-right"></i>
157
<i class="mdi mdi-chevron-right mdi-rotate-90"></i>  <!-- Down arrow -->
158
<i class="mdi mdi-chevron-right mdi-rotate-180"></i> <!-- Left arrow -->
159
<i class="mdi mdi-chevron-right mdi-rotate-270"></i> <!-- Up arrow -->
160

161
<!-- Rotated icons for visual interest -->
162
<i class="mdi mdi-cog mdi-rotate-45"></i>
163
<i class="mdi mdi-diamond mdi-rotate-45"></i>
164
<i class="mdi mdi-square mdi-rotate-45"></i>
165
```
166

167
### Flip Transform Classes
168

169
CSS transform classes for flipping icons horizontally or vertically, creating mirror effects.
170

171
```css { .api }
172
/**
173
 * Horizontal flip transform
174
 * Mirrors the icon along the vertical axis
175
 */
176
.mdi-flip-h:before {
177
  -webkit-transform: scaleX(-1);
178
  transform: scaleX(-1);
179
  filter: FlipH;
180
  -ms-filter: "FlipH";
181
}
182

183
/**
184
 * Vertical flip transform
185
 * Mirrors the icon along the horizontal axis
186
 */
187
.mdi-flip-v:before {
188
  -webkit-transform: scaleY(-1);
189
  transform: scaleY(-1);
190
  filter: FlipV;  
191
  -ms-filter: "FlipV";
192
}
193
```
194

195
**Usage Examples:**
196

197
```html
198
<!-- Horizontally flipped icons -->
199
<i class="mdi mdi-arrow-right"></i>
200
<i class="mdi mdi-arrow-right mdi-flip-h"></i> <!-- Arrow pointing left -->
201

202
<!-- Vertically flipped icons -->
203
<i class="mdi mdi-triangle"></i>
204
<i class="mdi mdi-triangle mdi-flip-v"></i> <!-- Upside down triangle -->
205

206
<!-- Directional icons -->
207
<i class="mdi mdi-format-align-left"></i>
208
<i class="mdi mdi-format-align-left mdi-flip-h"></i> <!-- Right align -->
209
```
210

211
### Animation Classes
212

213
CSS animation classes for creating visual effects like loading spinners and attention-grabbing elements.
214

215
```css { .api }
216
/**
217
 * Spinning animation class
218
 * Creates continuous 360-degree rotation over 2 seconds
219
 */
220
.mdi-spin:before {
221
  -webkit-animation: mdi-spin 2s infinite linear;
222
  animation: mdi-spin 2s infinite linear;
223
}
224

225
/**
226
 * Keyframes for spinning animation
227
 * Compatible with WebKit browsers
228
 */
229
@-webkit-keyframes mdi-spin {
230
  0% {
231
    -webkit-transform: rotate(0deg);
232
    transform: rotate(0deg);
233
  }
234
  100% {
235
    -webkit-transform: rotate(359deg);
236
    transform: rotate(359deg);
237
  }
238
}
239

240
/**
241
 * Standard keyframes for spinning animation
242
 */
243
@keyframes mdi-spin {
244
  0% {
245
    -webkit-transform: rotate(0deg);
246
    transform: rotate(0deg);
247
  }
248
  100% {
249
    -webkit-transform: rotate(359deg);
250
    transform: rotate(359deg);
251
  }
252
}
253
```
254

255
**Usage Examples:**
256

257
```html
258
<!-- Loading spinners -->
259
<i class="mdi mdi-loading mdi-spin"></i>
260
<i class="mdi mdi-refresh mdi-spin"></i>
261
<i class="mdi mdi-cog mdi-spin"></i>
262

263
<!-- Loading states with text -->
264
<button disabled>
265
  <i class="mdi mdi-loading mdi-spin"></i> Processing...
266
</button>
267

268
<!-- Animated icons in status messages -->
269
<div class="status-message">
270
  <i class="mdi mdi-sync mdi-spin"></i>
271
  Synchronizing data...
272
</div>
273
```
274

275
### Combining Transform Classes
276

277
Multiple transformation classes can be combined for complex visual effects.
278

279
```css { .api }
280
/**
281
 * Transform classes can be combined
282
 * Order of application: rotation, then flip, then animation
283
 */
284
.mdi-rotate-90.mdi-flip-h:before {
285
  -webkit-transform: scaleX(-1) rotate(90deg);
286
  transform: scaleX(-1) rotate(90deg);
287
  filter: FlipH;
288
  -ms-filter: "FlipH";
289
}
290
```
291

292
**Usage Examples:**
293

294
```html
295
<!-- Combined transformations -->
296
<i class="mdi mdi-arrow-up mdi-rotate-45 mdi-flip-h"></i>
297

298
<!-- Size + theme + rotation -->
299
<i class="mdi mdi-chevron-right mdi-36px mdi-dark mdi-rotate-90"></i>
300

301
<!-- Animation + theme + size -->
302
<i class="mdi mdi-loading mdi-spin mdi-light mdi-24px"></i>
303

304
<!-- Complex combination -->
305
<i class="mdi mdi-account mdi-48px mdi-dark mdi-rotate-180 mdi-flip-v"></i>
306
```
307

308
### Custom CSS Styling
309

310
Icons can be further customized with regular CSS properties in addition to the utility classes.
311

312
```css
313
/* Custom icon styling */
314
.custom-icon {
315
  color: #ff5722;
316
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
317
  transition: all 0.3s ease;
318
}
319

320
.custom-icon:hover {
321
  color: #d84315;
322
  transform: scale(1.1);
323
}
324

325
/* Gradient icons */
326
.gradient-icon {
327
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
328
  -webkit-background-clip: text;
329
  -webkit-text-fill-color: transparent;
330
  background-clip: text;
331
}
332

333
/* Outlined icons */
334
.outlined-icon {
335
  color: transparent;
336
  text-shadow: 0 0 0 #333;
337
  -webkit-text-stroke: 1px #333;
338
}
339
```
340

341
**Usage Examples:**
342

343
```html
344
<!-- Custom styled icons -->
345
<i class="mdi mdi-heart custom-icon"></i>
346
<i class="mdi mdi-star gradient-icon"></i>
347
<i class="mdi mdi-circle outlined-icon"></i>
348

349
<!-- Interactive icons -->
350
<button class="icon-button">
351
  <i class="mdi mdi-favorite custom-icon"></i>
352
</button>
353
```
354

355
### Accessibility Considerations
356

357
Proper accessibility practices when using icon transformations and themes.
358

359
```html
360
<!-- Screen reader friendly icons -->
361
<i class="mdi mdi-account mdi-dark" aria-label="User account"></i>
362
<i class="mdi mdi-loading mdi-spin" aria-label="Loading" aria-hidden="false"></i>
363

364
<!-- Decorative icons should be hidden from screen readers -->
365
<i class="mdi mdi-star mdi-rotate-45" aria-hidden="true"></i>
366

367
<!-- Icons with semantic meaning -->
368
<button>
369
  <i class="mdi mdi-delete mdi-dark" aria-hidden="true"></i>
370
  <span class="sr-only">Delete item</span>
371
</button>
372
```
373

374
### Browser Compatibility
375

376
Transform and animation compatibility across different browsers.
377

378
```css
379
/* CSS transforms work in */
380
/* - Chrome 4+, Firefox 3.5+, Safari 3.1+, IE 9+ */
381

382
/* CSS animations work in */  
383
/* - Chrome 4+, Firefox 5+, Safari 4+, IE 10+ */
384

385
/* WebKit prefixes for older browser support */
386
/* Included automatically in the generated CSS */
387
```