0
# Material Icons
1

2
Google's official Material Design icons providing 2100+ icons in multiple style variants. Each icon is available as both SVG exports for programmatic use and webfonts for CSS styling.
3

4
## Capabilities
5

6
### Material Icons (Standard)
7

8
Standard filled Material Design icons.
9

10
```typescript { .api }
11
/**
12
 * SVG string constants for Material Icons
13
 * Each constant contains the SVG path data for the icon
14
 */
15
export declare const mat10k: string;
16
export declare const mat10mp: string;
17
export declare const mat11mp: string;
18
export declare const mat123: string;
19
export declare const matAdd: string;
20
export declare const matAddAPhoto: string;
21
export declare const matAddAlarm: string;
22
export declare const matAddAlert: string;
23
export declare const matAddBox: string;
24
export declare const matAddCircle: string;
25
export declare const matAddCircleOutline: string;
26
export declare const matAddComment: string;
27
export declare const matAddHome: string;
28
export declare const matAddLocationAlt: string;
29
export declare const matAddShoppingCart: string;
30
export declare const matAddTask: string;
31
export declare const matHome: string;
32
export declare const matSettings: string;
33
export declare const matMenu: string;
34
export declare const matClose: string;
35
export declare const matArrowBack: string;
36
export declare const matArrowForward: string;
37
export declare const matSearch: string;
38
export declare const matMoreVert: string;
39
export declare const matMoreHoriz: string;
40
export declare const matFavorite: string;
41
export declare const matFavoriteBorder: string;
42
export declare const matShare: string;
43
export declare const matDelete: string;
44
export declare const matEdit: string;
45
export declare const matCheck: string;
46
export declare const matCheckCircle: string;
47
export declare const matError: string;
48
export declare const matWarning: string;
49
export declare const matInfo: string;
50
export declare const matVisibility: string;
51
export declare const matVisibilityOff: string;
52
export declare const matDownload: string;
53
export declare const matUpload: string;
54
export declare const matSave: string;
55
export declare const matPrint: string;
56
export declare const matEmail: string;
57
export declare const matPhone: string;
58
export declare const matMessage: string;
59
export declare const matNotifications: string;
60
export declare const matAccount: string;
61
export declare const matAccountCircle: string;
62
export declare const matLock: string;
63
export declare const matLockOpen: string;
64
export declare const matCalendarToday: string;
65
export declare const matSchedule: string;
66
export declare const matWork: string;
67
export declare const matBusiness: string;
68
export declare const matShoppingCart: string;
69
export declare const matPayment: string;
70
// ... and 2000+ more icons
71
```
72

73
**Usage Examples:**
74

75
```javascript
76
import { 
77
  matHome, 
78
  matSettings, 
79
  matAdd, 
80
  matDelete, 
81
  matEdit 
82
} from "@quasar/extras/material-icons";
83

84
// Use with Quasar QIcon component
85
<template>
86
  <q-icon :name="homeIcon" size="24px" />
87
  <q-btn :icon="addIcon" @click="addItem" />
88
  <q-btn :icon="editIcon" flat round @click="editItem" />
89
</template>
90

91
<script>
92
export default {
93
  data() {
94
    return {
95
      homeIcon: matHome,
96
      addIcon: matAdd,
97
      editIcon: matEdit,
98
      deleteIcon: matDelete,
99
      settingsIcon: matSettings
100
    };
101
  }
102
}
103
</script>
104
```
105

106
### Material Icons Outlined
107

108
Outlined style variant of Material Icons.
109

110
```typescript { .api }
111
/**
112
 * Material Icons Outlined - outlined style variants
113
 * Prefix: o_ for webfont usage
114
 */
115
export declare const matAddOutlined: string;
116
export declare const matHomeOutlined: string;
117
export declare const matSettingsOutlined: string;
118
export declare const matDeleteOutlined: string;
119
export declare const matEditOutlined: string;
120
export declare const matFavoriteOutlined: string;
121
export declare const matSearchOutlined: string;
122
export declare const matMenuOutlined: string;
123
export declare const matCloseOutlined: string;
124
export declare const matCheckOutlined: string;
125
export declare const matInfoOutlined: string;
126
export declare const matWarningOutlined: string;
127
export declare const matErrorOutlined: string;
128
export declare const matVisibilityOutlined: string;
129
export declare const matAccountCircleOutlined: string;
130
export declare const matNotificationsOutlined: string;
131
export declare const matCalendarTodayOutlined: string;
132
export declare const matWorkOutlined: string;
133
export declare const matShoppingCartOutlined: string;
134
// ... more outlined variants
135
```
136

137
### Material Icons Round
138

139
Rounded style variant of Material Icons.
140

141
```typescript { .api }
142
/**
143
 * Material Icons Round - rounded style variants  
144
 * Prefix: r_ for webfont usage
145
 */
146
export declare const matAddRound: string;
147
export declare const matHomeRound: string;
148
export declare const matSettingsRound: string;
149
export declare const matDeleteRound: string;
150
export declare const matEditRound: string;
151
export declare const matFavoriteRound: string;
152
export declare const matSearchRound: string;
153
export declare const matMenuRound: string;
154
export declare const matCloseRound: string;
155
export declare const matCheckRound: string;
156
export declare const matInfoRound: string;
157
export declare const matWarningRound: string;
158
export declare const matErrorRound: string;
159
export declare const matVisibilityRound: string;
160
export declare const matAccountCircleRound: string;
161
export declare const matNotificationsRound: string;
162
export declare const matCalendarTodayRound: string;
163
export declare const matWorkRound: string;
164
export declare const matShoppingCartRound: string;
165
// ... more rounded variants
166
```
167

168
### Material Icons Sharp
169

170
Sharp style variant of Material Icons.
171

172
```typescript { .api }
173
/**
174
 * Material Icons Sharp - sharp/angular style variants
175
 * Prefix: s_ for webfont usage  
176
 */
177
export declare const matAddSharp: string;
178
export declare const matHomeSharp: string;
179
export declare const matSettingsSharp: string;
180
export declare const matDeleteSharp: string;
181
export declare const matEditSharp: string;
182
export declare const matFavoriteSharp: string;
183
export declare const matSearchSharp: string;
184
export declare const matMenuSharp: string;
185
export declare const matCloseSharp: string;
186
export declare const matCheckSharp: string;
187
export declare const matInfoSharp: string;
188
export declare const matWarningSharp: string;
189
export declare const matErrorSharp: string;
190
export declare const matVisibilitySharp: string;
191
export declare const matAccountCircleSharp: string;
192
export declare const matNotificationsSharp: string;
193
export declare const matCalendarTodaySharp: string;
194
export declare const matWorkSharp: string;
195
export declare const matShoppingCartSharp: string;
196
// ... more sharp variants
197
```
198

199
## Webfont Usage
200

201
### CSS Import
202

203
```css { .api }
204
/* Import Material Icons CSS */
205
@import '@quasar/extras/material-icons/material-icons.css';
206
@import '@quasar/extras/material-icons-outlined/material-icons-outlined.css';
207
@import '@quasar/extras/material-icons-round/material-icons-round.css';
208
@import '@quasar/extras/material-icons-sharp/material-icons-sharp.css';
209
```
210

211
### HTML Usage
212

213
```html
214
<!-- Standard Material Icons -->
215
<i class="material-icons">home</i>
216
<i class="material-icons">settings</i>
217
<i class="material-icons">add</i>
218

219
<!-- Outlined variants -->
220
<i class="material-icons-outlined">o_home</i>
221
<i class="material-icons-outlined">o_settings</i>
222

223
<!-- Round variants -->  
224
<i class="material-icons-round">r_home</i>
225
<i class="material-icons-round">r_settings</i>
226

227
<!-- Sharp variants -->
228
<i class="material-icons-sharp">s_home</i>
229
<i class="material-icons-sharp">s_settings</i>
230
```
231

232
### QIcon Usage
233

234
```html
235
<!-- With Quasar QIcon component -->
236
<q-icon name="home" />
237
<q-icon name="o_settings" />
238
<q-icon name="r_favorite" />
239
<q-icon name="s_delete" />
240
```
241

242
## Icon Naming Convention
243

244
### SVG Export Names
245
- Prefix: `mat` (e.g., `matHome`, `matSettings`)
246
- CamelCase after prefix
247
- Numbers at start become words (e.g., `mat3dRotation` for "3d_rotation")
248

249
### Webfont Class Names
250
- Standard: Direct icon name with underscores (e.g., `home`, `settings`, `add_circle`)
251
- Outlined: Prefix `o_` (e.g., `o_home`, `o_settings`)
252
- Round: Prefix `r_` (e.g., `r_home`, `r_settings`)  
253
- Sharp: Prefix `s_` (e.g., `s_home`, `s_settings`)
254

255
## Material Symbols
256

257
Google's newer Material Symbols collection with updated designs and expanded icon set.
258

259
### Material Symbols Outlined
260

261
```typescript { .api }
262
/**
263
 * Material Symbols Outlined - newer outlined symbol variants
264
 * CDN v244 - expanded set beyond Material Icons
265
 */
266
export declare const matSymbolOutlined: string;
267
// ... expanded Material Symbols set
268
```
269

270
### Material Symbols Rounded
271

272
```typescript { .api }
273
/**
274
 * Material Symbols Rounded - newer rounded symbol variants  
275
 * CDN v245 - expanded set beyond Material Icons
276
 */
277
export declare const matSymbolRounded: string;
278
// ... expanded Material Symbols set
279
```
280

281
### Material Symbols Sharp
282

283
```typescript { .api }
284
/**
285
 * Material Symbols Sharp - newer sharp symbol variants
286
 * CDN v241 - expanded set beyond Material Icons  
287
 */
288
export declare const matSymbolSharp: string;
289
// ... expanded Material Symbols set
290
```
291

292
### Material Symbols CSS Import
293

294
```css { .api }
295
/* Import Material Symbols CSS */
296
@import '@quasar/extras/material-symbols-outlined/material-symbols-outlined.css';
297
@import '@quasar/extras/material-symbols-rounded/material-symbols-rounded.css';
298
@import '@quasar/extras/material-symbols-sharp/material-symbols-sharp.css';
299
```
300

301
## SVG Format
302

303
All Material Icons and Material Symbols SVG exports use the format:
304

305
```
306
Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 24 24')
307
```
308

309
The SVG path data can be used directly in SVG elements or with Quasar's QIcon component.