0
# SCSS Programming Interface
1

2
SCSS variables, functions, and mixins for programmatic icon usage and customization. Enables build-time configuration and dynamic icon generation.
3

4
## Capabilities
5

6
### Configuration Variables
7

8
Configurable SCSS variables that control font paths, sizing, prefixes, and versioning.
9

10
```scss { .api }
11
/**
12
 * Font file configuration
13
 * Controls the path to webfont files relative to compiled CSS
14
 */
15
$mdi-font-path: "../fonts" !default;
16

17
/**
18
 * Font family and file naming
19
 */
20
$mdi-filename: "materialdesignicons" !default;
21
$mdi-font-name: "Material Design Icons" !default;
22
$mdi-font-family: "materialdesignicons" !default;
23
$mdi-font-weight: "normal" !default;
24

25
/**
26
 * Base font size for icons
27
 * Default size when no size modifier class is applied
28
 */
29
$mdi-font-size-base: 24px !default;
30

31
/**
32
 * CSS class prefix for all generated classes
33
 * Change this to customize the class naming pattern
34
 */
35
$mdi-css-prefix: mdi !default;
36

37
/**
38
 * Package version used in font file URLs
39
 * Helps with cache busting during updates
40
 */
41
$mdi-version: "7.4.47" !default;
42
```
43

44
**Usage Examples:**
45

46
```scss
47
// Customize font path for your build setup
48
$mdi-font-path: './assets/fonts';
49

50
// Use a different class prefix
51
$mdi-css-prefix: icon;
52

53
// Change default size
54
$mdi-font-size-base: 20px;
55

56
// Import after setting variables
57
@import '~@mdi/font/scss/materialdesignicons';
58
```
59

60
### Icon Definitions Map
61

62
The comprehensive map containing all 7,448 icon definitions with their Unicode codepoints.
63

64
```scss { .api }
65
/**
66
 * Complete map of all Material Design Icons
67
 * Maps icon names to their Unicode codepoints
68
 */
69
$mdi-icons: (
70
  "ab-testing": F01C9,
71
  "abacus": F16E0,
72
  "account": F0004,
73
  "account-alert": F0005,
74
  "account-box": F0006,
75
  "account-check": F0007,
76
  "account-circle": F0008,
77
  "account-edit": F06BC,
78
  "account-group": F0849,
79
  "account-key": F00A4,
80
  "account-multiple": F00A5,
81
  "account-outline": F00A6,
82
  "account-plus": F00A7,
83
  "account-remove": F00A8,
84
  "account-settings": F00A9,
85
  "home": F02DC,
86
  "home-outline": F06A1,
87
  "settings": F0493,
88
  "settings-outline": F0494,
89
  "email": F01EE,
90
  "email-outline": F01EF,
91
  "phone": F03F2,
92
  "phone-outline": F11A5,
93
  "refresh": F0450,
94
  "loading": F0772,
95
  "check": F012C,
96
  "check-circle": F012E,
97
  "close": F0156,
98
  "close-circle": F0158,
99
  "menu": F0349,
100
  "search": F049F,
101
  "star": F04CE,
102
  "star-outline": F04CF,
103
  "heart": F02D1,
104
  "heart-outline": F02D2,
105
  "download": F01DA,
106
  "upload": F054C,
107
  "delete": F01B4,
108
  "edit": F03EB,
109
  "copy": F018F,
110
  "folder": F024B,
111
  "folder-outline": F024C,
112
  "file": F0214,
113
  "file-outline": F0215
114
  // ... 7,400+ more icon definitions
115
) !default;
116
```
117

118
### Icon Lookup Function
119

120
Function to retrieve the Unicode character for a named icon, with error handling for missing icons.
121

122
```scss { .api }
123
/**
124
 * Retrieves the Unicode character for a named Material Design icon
125
 * @param $name - Icon name without the mdi- prefix (e.g., "account", "home")
126
 * @returns Unicode character string for use in CSS content property
127
 * @warns If icon name is not found in the $mdi-icons map
128
 */
129
@function mdi($name) {
130
  @if map-has-key($mdi-icons, $name) == false {
131
    @warn "Icon #{$name} not found.";
132
    @return "";
133
  }
134
  @return char(map-get($mdi-icons, $name));
135
}
136
```
137

138
**Usage Examples:**
139

140
```scss
141
// Use in custom CSS classes
142
.custom-home-icon::before {
143
  content: mdi("home");
144
}
145

146
.save-button::before {
147
  content: mdi("content-save");
148
  margin-right: 8px;
149
}
150

151
// Dynamic icon generation
152
@each $icon-name in ("account", "home", "settings") {
153
  .custom-#{$icon-name}::before {
154
    content: mdi($icon-name);
155
  }
156
}
157
```
158

159
### Character Helper Function
160

161
Internal helper function that converts Unicode codepoints to CSS content strings with browser compatibility.
162

163
```scss { .api }
164
/**
165
 * Converts a Unicode codepoint to a CSS content string
166
 * Handles different Sass compiler behaviors for maximum compatibility
167
 * @param $character-code - Unicode codepoint (e.g., F0004)
168
 * @returns Escaped Unicode string suitable for CSS content property
169
 */
170
@function char($character-code) {
171
  @if function-exists("selector-append") {
172
    @return unquote("\"\\#{$character-code}\"");
173
  }
174
  @if "\\#{'x'}" == "\\x" {
175
    @return str-slice("\x", 1, 1) + $character-code;
176
  }
177
  @else {
178
    @return #{"\"\\"}#{$character-code + "\""};
179
  }
180
}
181
```
182

183
### Size Variable Configuration
184

185
Predefined size values used to generate size modifier classes.
186

187
```scss { .api }
188
/**
189
 * Available icon sizes for generated utility classes
190
 * Generates .mdi-{size}px classes for each value
191
 */
192
$mdi-sizes: 18 24 36 48 !default;
193
```
194

195
**Usage Examples:**
196

197
```scss
198
// Add custom sizes
199
$mdi-sizes: 16 18 20 24 32 36 48 64;
200
@import '~@mdi/font/scss/materialdesignicons';
201

202
// This generates additional classes:
203
// .mdi-16px, .mdi-20px, .mdi-32px, .mdi-64px
204
```
205

206
### Rotation Configuration
207

208
Predefined rotation angles for transformation utility classes.
209

210
```scss { .api }
211
/**
212
 * Available rotation angles for generated rotation classes
213
 * Generates .mdi-rotate-{degree} classes for each value
214
 */
215
$mdi-degrees: 45 90 135 180 225 270 315 !default;
216
```
217

218
**Usage Examples:**
219

220
```scss
221
// Add custom rotation angles
222
$mdi-degrees: 30 45 60 90 120 135 180 225 270 315;
223
@import '~@mdi/font/scss/materialdesignicons';
224

225
// This generates additional classes:
226
// .mdi-rotate-30, .mdi-rotate-60, .mdi-rotate-120
227
```
228

229
### Module Import Structure
230

231
The main SCSS file imports all component modules in a specific order for proper compilation.
232

233
```scss { .api }
234
/**
235
 * Main SCSS entry point that imports all component modules
236
 * Import order is important for variable dependencies
237
 */
238
/* MaterialDesignIcons.com */
239
@import "variables";     // Icon definitions and configuration
240
@import "functions";     // Helper functions (char, mdi)
241
@import "path";          // Font-face declarations
242
@import "core";          // Base icon styles (.mdi, .mdi-set)
243
@import "icons";         // Individual icon classes (.mdi-*)
244
@import "extras";        // Utility classes (sizes, themes, transforms)
245
@import "animated";      // Animation classes (.mdi-spin)
246
```
247

248
**Custom Import Examples:**
249

250
```scss
251
// Import only specific modules
252
@import '~@mdi/font/scss/variables';
253
@import '~@mdi/font/scss/functions';
254
@import '~@mdi/font/scss/core';
255

256
// Use only the icon lookup function
257
.my-custom-icon::before {
258
  content: mdi("account");
259
  font-family: "Material Design Icons";
260
}
261
```
262

263
```scss
264
// Import with custom configuration
265
$mdi-font-path: './fonts';
266
$mdi-css-prefix: icon;
267
$mdi-font-size-base: 20px;
268

269
@import '~@mdi/font/scss/materialdesignicons';
270

271
// Results in classes like .icon-account instead of .mdi-account
272
```
273

274
### Build Integration
275

276
Integration patterns for various build tools and frameworks.
277

278
```scss
279
// Laravel Mix
280
// resources/sass/app.scss
281
$mdi-font-path: '/fonts';
282
@import '~@mdi/font/scss/materialdesignicons';
283

284
// Angular
285
// angular.json styles array or component styleUrls
286
@import '~@mdi/font/scss/materialdesignicons';
287

288
// Vue CLI
289
// In a .vue component
290
<style lang="scss">
291
@import '~@mdi/font/scss/materialdesignicons';
292
</style>
293

294
// React with Sass
295
// src/styles/main.scss
296
@import '~@mdi/font/scss/materialdesignicons';
297
```
298

299
### Error Handling
300

301
The SCSS functions include built-in error handling and warnings.
302

303
```scss
304
// Using non-existent icon name
305
.invalid-icon::before {
306
  content: mdi("non-existent-icon");
307
  // Outputs SCSS warning: "Icon non-existent-icon not found."
308
  // Returns empty content: ""
309
}
310

311
// Checking if icon exists before use
312
@if map-has-key($mdi-icons, "custom-icon") {
313
  .custom-icon::before {
314
    content: mdi("custom-icon");
315
  }
316
} @else {
317
  .custom-icon::before {
318
    content: mdi("help-circle"); // fallback icon
319
  }
320
}
321
```