0
# CSS Icon Usage
1

2
Direct CSS class-based icon integration for HTML elements, providing immediate access to all Material Design icons through predefined CSS classes.
3

4
## Capabilities
5

6
### Base Icon Class
7

8
The foundational class required for all Material Design icons, providing font family, sizing, and rendering optimizations.
9

10
```css { .api }
11
/**
12
 * Base class required for all Material Design icons
13
 * Sets font family, display properties, and rendering optimizations
14
 */
15
.mdi {
16
  display: inline-block;
17
  font-family: "Material Design Icons";
18
  font-size: 24px;
19
  line-height: 1;
20
  text-rendering: auto;
21
  -webkit-font-smoothing: antialiased;
22
  -moz-osx-font-smoothing: grayscale;
23
}
24

25
/**
26
 * Alternative base class for icons within sets
27
 */
28
.mdi-set {
29
  display: inline-block;
30
  font-family: "Material Design Icons";
31
  font-size: 24px;
32
  line-height: 1;
33
  text-rendering: auto;
34
  -webkit-font-smoothing: antialiased;
35
  -moz-osx-font-smoothing: grayscale;
36
}
37
```
38

39
**Usage Examples:**
40

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

46
<!-- Icons within icon sets -->
47
<div class="mdi-set mdi-email"></div>
48
```
49

50
### Individual Icon Classes
51

52
Each of the 7,448 Material Design icons has its own CSS class that defines the Unicode character to display.
53

54
```css { .api }
55
/**
56
 * Individual icon classes following the pattern .mdi-{icon-name}
57
 * Each class sets the content property to the icon's Unicode character
58
 */
59
.mdi-account::before { content: "\\F0004"; }
60
.mdi-home::before { content: "\\F02DC"; }
61
.mdi-settings::before { content: "\\F0493"; }
62
.mdi-email::before { content: "\\F01EE"; }
63
.mdi-phone::before { content: "\\F03F2"; }
64
.mdi-refresh::before { content: "\\F0450"; }
65
.mdi-loading::before { content: "\\F0772"; }
66
.mdi-check::before { content: "\\F012C"; }
67
.mdi-close::before { content: "\\F0156"; }
68
.mdi-menu::before { content: "\\F0349"; }
69
.mdi-search::before { content: "\\F049F"; }
70
.mdi-star::before { content: "\\F04CE"; }
71
.mdi-heart::before { content: "\\F02D1"; }
72
.mdi-download::before { content: "\\F01DA"; }
73
.mdi-upload::before { content: "\\F054C"; }
74
.mdi-delete::before { content: "\\F01B4"; }
75
.mdi-edit::before { content: "\\F03EB"; }
76
.mdi-copy::before { content: "\\F018F"; }
77
.mdi-folder::before { content: "\\F024B"; }
78
.mdi-file::before { content: "\\F0214"; }
79
/* ... 7,428 more icon classes available */
80
```
81

82
**Usage Examples:**
83

84
```html
85
<!-- Common icons -->
86
<i class="mdi mdi-account"></i>
87
<i class="mdi mdi-home"></i>
88
<i class="mdi mdi-settings"></i>
89

90
<!-- Action icons -->
91
<button><i class="mdi mdi-check"></i> Save</button>
92
<button><i class="mdi mdi-close"></i> Cancel</button>
93
<button><i class="mdi mdi-delete"></i> Delete</button>
94

95
<!-- Navigation icons -->
96
<nav>
97
  <a href="/"><i class="mdi mdi-home"></i> Home</a>
98
  <a href="/search"><i class="mdi mdi-search"></i> Search</a>
99
  <a href="/menu"><i class="mdi mdi-menu"></i> Menu</a>
100
</nav>
101

102
<!-- File operation icons -->
103
<div class="file-actions">
104
  <i class="mdi mdi-download"></i>
105
  <i class="mdi mdi-upload"></i>
106
  <i class="mdi mdi-copy"></i>
107
  <i class="mdi mdi-edit"></i>
108
</div>
109
```
110

111
### Font-Face Declaration
112

113
The font-face declaration that loads the Material Design Icons webfont files in multiple formats for browser compatibility.
114

115
```css { .api }
116
/**
117
 * Font-face declaration loading Material Design Icons webfont
118
 * Includes multiple formats for broad browser compatibility
119
 */
120
@font-face {
121
  font-family: "Material Design Icons";
122
  src: url("../fonts/materialdesignicons-webfont.eot?v=7.4.47");
123
  src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=7.4.47") format("embedded-opentype"),
124
       url("../fonts/materialdesignicons-webfont.woff2?v=7.4.47") format("woff2"),
125
       url("../fonts/materialdesignicons-webfont.woff?v=7.4.47") format("woff"),
126
       url("../fonts/materialdesignicons-webfont.ttf?v=7.4.47") format("truetype");
127
  font-weight: normal;
128
  font-style: normal;
129
}
130
```
131

132
**Browser Support:**
133

134
- **WOFF2**: Modern browsers (Chrome 36+, Firefox 39+, Safari 12+)
135
- **WOFF**: Wide browser support (IE 9+, all modern browsers)
136
- **TTF**: Universal fallback support
137
- **EOT**: Internet Explorer compatibility
138

139
### CSS Import Methods
140

141
Different ways to include the Material Design Icons CSS in your project.
142

143
```css { .api }
144
/* Method 1: CSS @import */
145
@import url('path/to/materialdesignicons.css');
146

147
/* Method 2: CSS @import with node_modules */
148
@import url('~@mdi/font/css/materialdesignicons.css');
149

150
/* Method 3: CSS @import minified version */
151
@import url('~@mdi/font/css/materialdesignicons.min.css');
152
```
153

154
**HTML Link Method:**
155

156
```html
157
<!-- Development version -->
158
<link rel="stylesheet" href="node_modules/@mdi/font/css/materialdesignicons.css">
159

160
<!-- Production minified version -->
161
<link rel="stylesheet" href="node_modules/@mdi/font/css/materialdesignicons.min.css">
162

163
<!-- CDN usage (replace with actual CDN URL) -->
164
<link rel="stylesheet" href="https://cdn.example.com/@mdi/font@7.4.47/css/materialdesignicons.min.css">
165
```
166

167
**Usage Examples:**
168

169
```html
170
<!DOCTYPE html>
171
<html>
172
<head>
173
  <link rel="stylesheet" href="node_modules/@mdi/font/css/materialdesignicons.css">
174
</head>
175
<body>
176
  <h1><i class="mdi mdi-home"></i> Welcome</h1>
177
  <p>Click <i class="mdi mdi-download"></i> to download files.</p>
178
  
179
  <div class="toolbar">
180
    <button><i class="mdi mdi-content-save"></i></button>
181
    <button><i class="mdi mdi-content-copy"></i></button>
182
    <button><i class="mdi mdi-delete"></i></button>
183
  </div>
184
</body>
185
</html>
186
```
187

188
## Integration with Build Tools
189

190
### Webpack
191

192
```javascript
193
// webpack.config.js
194
module.exports = {
195
  module: {
196
    rules: [
197
      {
198
        test: /\.(woff|woff2|eot|ttf)$/,
199
        use: {
200
          loader: 'file-loader',
201
          options: {
202
            outputPath: 'fonts/',
203
          },
204
        },
205
      },
206
    ],
207
  },
208
};
209
```
210

211
### Vite
212

213
```javascript
214
// vite.config.js
215
export default {
216
  css: {
217
    preprocessorOptions: {
218
      scss: {
219
        additionalData: `@import "@mdi/font/scss/materialdesignicons.scss";`
220
      }
221
    }
222
  }
223
};
224
```
225

226
### Parcel
227

228
Parcel automatically handles font files and CSS imports:
229

230
```css
231
/* In your CSS file */
232
@import "@mdi/font/css/materialdesignicons.css";
233
```