0
# Material Design Icons Font
1

2
Material Design Icons Font (@mdi/font) is a comprehensive webfont distribution containing 7,448 Material Design icons from both Stock and Community collections. It provides both CSS and SCSS integration for web applications, offering icons through CSS classes with support for themes, sizing, transformations, and animations.
3

4
## Package Information
5

6
- **Package Name**: @mdi/font
7
- **Package Type**: npm
8
- **Language**: CSS/SCSS
9
- **Installation**: `npm install @mdi/font`
10

11
## Core Imports
12

13
### CSS Import
14

15
```css
16
@import url('~@mdi/font/css/materialdesignicons.css');
17
```
18

19
Or via HTML link:
20

21
```html
22
<link rel="stylesheet" href="node_modules/@mdi/font/css/materialdesignicons.css">
23
```
24

25
### SCSS Import
26

27
```scss
28
@import '~@mdi/font/scss/materialdesignicons';
29
```
30

31
With custom configuration:
32

33
```scss
34
$mdi-font-path: './assets/fonts';
35
$mdi-css-prefix: icon;
36
@import '~@mdi/font/scss/materialdesignicons';
37
```
38

39
## Basic Usage
40

41
```html
42
<!-- Basic icon usage -->
43
<i class="mdi mdi-account"></i>
44
<i class="mdi mdi-home"></i>
45
<i class="mdi mdi-settings"></i>
46

47
<!-- Sized icons -->
48
<i class="mdi mdi-account mdi-18px"></i>
49
<i class="mdi mdi-home mdi-24px"></i>
50
<i class="mdi mdi-settings mdi-36px"></i>
51

52
<!-- Themed icons -->
53
<i class="mdi mdi-account mdi-dark"></i>
54
<i class="mdi mdi-home mdi-light"></i>
55

56
<!-- Transformed icons -->
57
<i class="mdi mdi-account mdi-rotate-90"></i>
58
<i class="mdi mdi-refresh mdi-spin"></i>
59
```
60

61
## Architecture
62

63
Material Design Icons Font is built around several key components:
64

65
- **Webfont Files**: Multiple font formats (WOFF2, WOFF, TTF, EOT) for browser compatibility
66
- **CSS Classes**: Over 7,400 icon classes following `.mdi-{icon-name}` pattern
67
- **Utility Classes**: Size modifiers, theme classes, transformation and animation classes
68
- **SCSS Variables**: Configurable font paths, prefixes, and icon mappings
69
- **SCSS Functions**: Helper functions for programmatic icon usage
70

71
## Capabilities
72

73
### CSS Icon Usage
74

75
Direct CSS class-based icon integration for HTML elements. Provides immediate access to all Material Design icons through predefined CSS classes.
76

77
```css { .api }
78
/* Base icon class required for all icons */
79
.mdi {
80
  display: inline-block;
81
  font-family: "Material Design Icons";
82
  font-size: 24px;
83
  /* Additional font smoothing and rendering properties */
84
}
85

86
/* Individual icon classes (7,448 available) */
87
.mdi-account::before { content: "\\F0004"; }
88
.mdi-home::before { content: "\\F02DC"; }
89
.mdi-settings::before { content: "\\F0493"; }
90
/* ... thousands more icons */
91
```
92

93
[CSS Usage](./css-usage.md)
94

95
### SCSS Programming Interface
96

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

99
```scss { .api }
100
// Configuration variables
101
$mdi-font-path: "../fonts" !default;
102
$mdi-font-size-base: 24px !default;
103
$mdi-css-prefix: mdi !default;
104

105
// Icon lookup function
106
@function mdi($name: string) : string;
107

108
// Icon definitions map (7,448 entries)
109
$mdi-icons: (
110
  "account": F0004,
111
  "home": F02DC,
112
  "settings": F0493,
113
  // ... thousands more
114
) !default;
115
```
116

117
[SCSS Usage](./scss-usage.md)
118

119
### Icon Theming and Transformations
120

121
Built-in utility classes for styling, sizing, rotating, flipping, and animating icons. Provides consistent theming and visual effects across all icons.
122

123
```css { .api }
124
/* Size classes */
125
.mdi-18px, .mdi-24px, .mdi-36px, .mdi-48px { /* size styling */ }
126

127
/* Theme classes */
128
.mdi-dark { color: rgba(0, 0, 0, 0.54); }
129
.mdi-light { color: rgba(255, 255, 255, 1); }
130

131
/* Rotation classes */
132
.mdi-rotate-45, .mdi-rotate-90, .mdi-rotate-135, .mdi-rotate-180,
133
.mdi-rotate-225, .mdi-rotate-270, .mdi-rotate-315 { /* rotation transforms */ }
134

135
/* Flip classes */
136
.mdi-flip-h, .mdi-flip-v { /* flip transforms */ }
137

138
/* Animation classes */
139
.mdi-spin { /* 2s infinite rotation animation */ }
140
```
141

142
[Theming and Transformations](./theming-transforms.md)
143

144
## Types
145

146
```typescript { .api }
147
// SCSS Variable Types (for TypeScript projects using SCSS)
148
type MDIIconName = string; // Any of 7,448 icon names like "account", "home", etc.
149

150
type MDISize = "18px" | "24px" | "36px" | "48px";
151

152
type MDIRotation = "45" | "90" | "135" | "180" | "225" | "270" | "315";
153

154
type MDITheme = "dark" | "light";
155

156
type MDITransform = "flip-h" | "flip-v";
157

158
type MDIAnimation = "spin";
159

160
// SCSS Configuration Interface
161
interface MDIConfig {
162
  fontPath?: string;        // Path to font files, default: "../fonts"
163
  fontSize?: string;        // Base font size, default: "24px"  
164
  cssPrefix?: string;       // CSS class prefix, default: "mdi"
165
  version?: string;         // Package version, default: "7.4.47"
166
}
167
```