0
# Material Design Icons (MDI)
1

2
Extended Material Design icons collection from the community, providing thousands of additional icons beyond Google's official set. Multiple versions are available for compatibility with different projects.
3

4
## Capabilities
5

6
### MDI v7 (Latest)
7

8
Latest version of Material Design Icons (v7.4.47) with newest icons and improvements.
9

10
```typescript { .api }
11
/**
12
 * MDI v7 SVG exports - each constant contains SVG path data
13
 * Prefix: mdi for SVG exports, mdi- for webfont
14
 */
15
export declare const mdiAccount: string;
16
export declare const mdiAccountAlert: string;
17
export declare const mdiAccountAlertOutline: string;
18
export declare const mdiAccountBox: string;
19
export declare const mdiAccountBoxOutline: string;
20
export declare const mdiAccountCircle: string;
21
export declare const mdiAccountCircleOutline: string;
22
export declare const mdiAccountGroup: string;
23
export declare const mdiAccountGroupOutline: string;
24
export declare const mdiHome: string;
25
export declare const mdiHomeOutline: string;
26
export declare const mdiHomeVariant: string;
27
export declare const mdiHomeVariantOutline: string;
28
export declare const mdiAlert: string;
29
export declare const mdiAlertCircle: string;
30
export declare const mdiAlertCircleOutline: string;
31
export declare const mdiAlertDecagram: string;
32
export declare const mdiAlertDecagramOutline: string;
33
export declare const mdiAlertOctagon: string;
34
export declare const mdiAlertOctagonOutline: string;
35
export declare const mdiAlertOutline: string;
36
export declare const mdiPlus: string;
37
export declare const mdiPlusCircle: string;
38
export declare const mdiPlusCircleOutline: string;
39
export declare const mdiPlusBox: string;
40
export declare const mdiPlusBoxOutline: string;
41
export declare const mdiMinus: string;
42
export declare const mdiMinusCircle: string;
43
export declare const mdiMinusCircleOutline: string;
44
export declare const mdiMinusBox: string;
45
export declare const mdiMinusBoxOutline: string;
46
export declare const mdiClose: string;
47
export declare const mdiCloseCircle: string;
48
export declare const mdiCloseCircleOutline: string;
49
export declare const mdiCloseBox: string;
50
export declare const mdiCloseBoxOutline: string;
51
export declare const mdiCheck: string;
52
export declare const mdiCheckCircle: string;
53
export declare const mdiCheckCircleOutline: string;
54
export declare const mdiCheckBox: string;
55
export declare const mdiCheckboxMarked: string;
56
export declare const mdiCheckboxBlankOutline: string;
57
export declare const mdiMenu: string;
58
export declare const mdiMenuDown: string;
59
export declare const mdiMenuUp: string;
60
export declare const mdiMenuLeft: string;
61
export declare const mdiMenuRight: string;
62
export declare const mdiDotsVertical: string;
63
export declare const mdiDotsHorizontal: string;
64
export declare const mdiSettings: string;
65
export declare const mdiSettingsOutline: string;
66
export declare const mdiCog: string;
67
export declare const mdiCogOutline: string;
68
export declare const mdiDelete: string;
69
export declare const mdiDeleteOutline: string;
70
export declare const mdiDeleteCircle: string;
71
export declare const mdiDeleteCircleOutline: string;
72
export declare const mdiTrashCan: string;
73
export declare const mdiTrashCanOutline: string;
74
export declare const mdiEdit: string;
75
export declare const mdiEditOutline: string;
76
export declare const mdiPencil: string;
77
export declare const mdiPencilOutline: string;
78
export declare const mdiContentSave: string;
79
export declare const mdiContentSaveOutline: string;
80
export declare const mdiDownload: string;
81
export declare const mdiDownloadOutline: string;
82
export declare const mdiUpload: string;
83
export declare const mdiUploadOutline: string;
84
export declare const mdiHeart: string;
85
export declare const mdiHeartOutline: string;
86
export declare const mdiShare: string;
87
export declare const mdiShareVariant: string;
88
export declare const mdiShareVariantOutline: string;
89
export declare const mdiMagnify: string;
90
export declare const mdiEye: string;
91
export declare const mdiEyeOff: string;
92
export declare const mdiEyeOutline: string;
93
export declare const mdiEyeOffOutline: string;
94
export declare const mdiEmail: string;
95
export declare const mdiEmailOutline: string;
96
export declare const mdiPhone: string;
97
export declare const mdiPhoneOutline: string;
98
export declare const mdiMessage: string;
99
export declare const mdiMessageOutline: string;
100
export declare const mdiBell: string;
101
export declare const mdiBellOutline: string;
102
export declare const mdiBellRing: string;
103
export declare const mdiBellRingOutline: string;
104
export declare const mdiCalendar: string;
105
export declare const mdiCalendarOutline: string;
106
export declare const mdiCalendarToday: string;
107
export declare const mdiClock: string;
108
export declare const mdiClockOutline: string;
109
export declare const mdiMapMarker: string;
110
export declare const mdiMapMarkerOutline: string;
111
export declare const mdiLock: string;
112
export declare const mdiLockOutline: string;
113
export declare const mdiLockOpen: string;
114
export declare const mdiLockOpenOutline: string;
115
export declare const mdiStar: string;
116
export declare const mdiStarOutline: string;
117
export declare const mdiShoppingCart: string;
118
export declare const mdiShoppingCartOutline: string;
119
export declare const mdiCreditCard: string;
120
export declare const mdiCreditCardOutline: string;
121
// ... and thousands more icons
122
```
123

124
**Usage Examples:**
125

126
```javascript
127
import { 
128
  mdiAccount, 
129
  mdiHome, 
130
  mdiSettings, 
131
  mdiPlus, 
132
  mdiDelete,
133
  mdiEdit,
134
  mdiHeart,
135
  mdiShare
136
} from "@quasar/extras/mdi-v7";
137

138
// Use with Quasar QIcon
139
<template>
140
  <q-icon :name="homeIcon" />
141
  <q-btn :icon="addIcon" color="primary" />
142
  <q-btn :icon="editIcon" flat round />
143
  <q-btn :icon="deleteIcon" color="negative" />
144
</template>
145

146
<script>
147
export default {
148
  data() {
149
    return {
150
      homeIcon: mdiHome,
151
      addIcon: mdiPlus,
152
      editIcon: mdiEdit,
153
      deleteIcon: mdiDelete,
154
      accountIcon: mdiAccount,
155
      settingsIcon: mdiSettings,
156
      heartIcon: mdiHeart,
157
      shareIcon: mdiShare
158
    };
159
  }
160
}
161
</script>
162
```
163

164
### MDI v6
165

166
Material Design Icons v6.9.96 for compatibility with older projects.
167

168
```typescript { .api }
169
/**
170
 * MDI v6 SVG exports - similar structure to v7 but older icon set
171
 */
172
export declare const mdiAccount: string;
173
export declare const mdiHome: string;
174
export declare const mdiSettings: string;
175
export declare const mdiPlus: string;
176
export declare const mdiMinus: string;
177
export declare const mdiClose: string;
178
export declare const mdiCheck: string;
179
export declare const mdiAlert: string;
180
export declare const mdiDelete: string;
181
export declare const mdiEdit: string;
182
export declare const mdiHeart: string;
183
export declare const mdiShare: string;
184
export declare const mdiMenu: string;
185
export declare const mdiMagnify: string;
186
export declare const mdiEye: string;
187
export declare const mdiEyeOff: string;
188
// ... more v6 icons
189
```
190

191
### MDI v5
192

193
Material Design Icons v5.9.55 for legacy compatibility.
194

195
```typescript { .api }
196
/**
197
 * MDI v5 SVG exports - legacy version
198
 */
199
export declare const mdiAccount: string;
200
export declare const mdiHome: string;
201
export declare const mdiSettings: string;
202
export declare const mdiPlus: string;
203
export declare const mdiMinus: string;
204
export declare const mdiClose: string;
205
export declare const mdiCheck: string;
206
export declare const mdiAlert: string;
207
export declare const mdiDelete: string;
208
export declare const mdiEdit: string;
209
// ... more v5 icons
210
```
211

212
### MDI v4
213

214
Material Design Icons v4.9.95 for legacy compatibility.
215

216
```typescript { .api }
217
/**
218
 * MDI v4 SVG exports - legacy version  
219
 */
220
export declare const mdiAccount: string;
221
export declare const mdiHome: string;
222
export declare const mdiSettings: string;
223
export declare const mdiPlus: string;
224
export declare const mdiMinus: string;
225
export declare const mdiClose: string;
226
export declare const mdiCheck: string;
227
export declare const mdiAlert: string;
228
export declare const mdiDelete: string;
229
export declare const mdiEdit: string;
230
// ... more v4 icons
231
```
232

233
## Webfont Usage
234

235
### CSS Import
236

237
```css { .api }
238
/* Import MDI CSS - only use one version at a time */
239
@import '@quasar/extras/mdi-v7/mdi-v7.css';
240
/* OR */
241
@import '@quasar/extras/mdi-v6/mdi-v6.css';
242
/* OR */  
243
@import '@quasar/extras/mdi-v5/mdi-v5.css';
244
/* OR */
245
@import '@quasar/extras/mdi-v4/mdi-v4.css';
246
```
247

248
### HTML Usage
249

250
```html
251
<!-- MDI webfont classes use mdi- prefix -->
252
<i class="mdi mdi-account"></i>
253
<i class="mdi mdi-home"></i>
254
<i class="mdi mdi-settings"></i>
255
<i class="mdi mdi-plus"></i>
256
<i class="mdi mdi-minus"></i>
257
<i class="mdi mdi-close"></i>
258
<i class="mdi mdi-check"></i>
259
<i class="mdi mdi-alert"></i>
260
<i class="mdi mdi-delete"></i>
261
<i class="mdi mdi-pencil"></i>
262
<i class="mdi mdi-heart"></i>
263
<i class="mdi mdi-share"></i>
264
```
265

266
### QIcon Usage
267

268
```html
269
<!-- With Quasar QIcon component -->
270
<q-icon name="mdi-account" />
271
<q-icon name="mdi-home" />
272
<q-icon name="mdi-settings" />
273
<q-icon name="mdi-plus" />
274
<q-icon name="mdi-delete" />
275
```
276

277
## Version Compatibility
278

279
**Important**: Only install one MDI version at a time to avoid conflicts:
280

281
- **MDI v7**: Latest features and icons (recommended for new projects)
282
- **MDI v6**: Stable version with good icon coverage
283
- **MDI v5**: Legacy support for older Quasar versions
284
- **MDI v4**: Legacy support for very old projects
285

286
## Icon Naming Convention
287

288
### SVG Export Names
289
- Prefix: `mdi` (e.g., `mdiHome`, `mdiAccount`)
290
- CamelCase after prefix
291
- Outline variants end with `Outline` (e.g., `mdiHomeOutline`)
292

293
### Webfont Class Names
294
- Prefix: `mdi-` (e.g., `mdi-home`, `mdi-account`)
295
- Kebab-case after prefix
296
- Use dash characters instead of spaces or underscores
297

298
## SVG Format
299

300
All MDI SVG exports follow the same format as Material Icons:
301

302
```
303
Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 24 24')
304
```
305

306
The SVG path data works with both SVG elements and Quasar's QIcon component.