0
# Material Icons
1

2
Comprehensive icon system with iOS-specific optimizations, automatic RTL support, and seamless integration with Material Design theming.
3

4
## Capabilities
5

6
### Icon Component
7

8
Vector icon display component with Material theming and iOS-optimized rendering.
9

10
```kotlin { .api }
11
/**
12
 * Material Design icon component with iOS-optimized vector rendering
13
 * @param imageVector ImageVector to draw inside this icon
14
 * @param contentDescription Text used by accessibility services to describe what this icon represents
15
 * @param modifier Modifier to be applied to this icon
16
 * @param tint Tint to be applied to this icon
17
 */
18
@Composable
19
fun Icon(
20
    imageVector: ImageVector,
21
    contentDescription: String?,
22
    modifier: Modifier = Modifier,
23
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
24
)
25

26
/**
27
 * Material Design icon component supporting different icon sources
28
 * @param painter Painter to draw inside this icon
29
 * @param contentDescription Text used by accessibility services to describe what this icon represents
30
 * @param modifier Modifier to be applied to this icon
31
 * @param tint Tint to be applied to this icon
32
 */
33
@Composable
34
fun Icon(
35
    painter: Painter,
36
    contentDescription: String?,
37
    modifier: Modifier = Modifier,
38
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
39
)
40

41
/**
42
 * Material Design icon component for bitmap icons
43
 * @param bitmap ImageBitmap to draw inside this icon
44
 * @param contentDescription Text used by accessibility services to describe what this icon represents
45
 * @param modifier Modifier to be applied to this icon
46
 * @param tint Tint to be applied to this icon
47
 */
48
@Composable
49
fun Icon(
50
    bitmap: ImageBitmap,
51
    contentDescription: String?,
52
    modifier: Modifier = Modifier,
53
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
54
)
55
```
56

57
**Usage Examples:**
58

59
```kotlin
60
// Basic icon usage
61
Icon(
62
    imageVector = Icons.Default.Home,
63
    contentDescription = "Home"
64
)
65

66
// Icon with custom tint
67
Icon(
68
    imageVector = Icons.Default.Favorite,
69
    contentDescription = "Favorite",
70
    tint = MaterialTheme.colors.error
71
)
72

73
// Icon with sizing
74
Icon(
75
    imageVector = Icons.Default.Add,
76
    contentDescription = "Add",
77
    modifier = Modifier.size(32.dp)
78
)
79

80
// Icon from painter resource
81
Icon(
82
    painter = painterResource(id = R.drawable.custom_icon),
83
    contentDescription = "Custom Icon",
84
    tint = MaterialTheme.colors.primary
85
)
86
```
87

88
### Default Icons Collection
89

90
Filled Material icons optimized for iOS display and touch targets.
91

92
```kotlin { .api }
93
object Icons {
94
    object Default {
95
        // Navigation icons
96
        val ArrowBack: ImageVector
97
        val ArrowForward: ImageVector
98
        val Menu: ImageVector
99
        val Close: ImageVector
100
        val MoreHoriz: ImageVector
101
        val MoreVert: ImageVector
102
        
103
        // Action icons
104
        val Add: ImageVector
105
        val Remove: ImageVector
106
        val Edit: ImageVector
107
        val Delete: ImageVector
108
        val Search: ImageVector
109
        val Refresh: ImageVector
110
        val Settings: ImageVector
111
        val Info: ImageVector
112
        val Help: ImageVector
113
        
114
        // Content icons
115
        val Home: ImageVector
116
        val Person: ImageVector
117
        val Email: ImageVector
118
        val Phone: ImageVector
119
        val LocationOn: ImageVector
120
        val Favorite: ImageVector
121
        val Share: ImageVector
122
        val ShoppingCart: ImageVector
123
        val Notifications: ImageVector
124
        
125
        // Media icons
126
        val PlayArrow: ImageVector
127
        val Pause: ImageVector
128
        val Stop: ImageVector
129
        val VolumeUp: ImageVector
130
        val VolumeDown: ImageVector
131
        val VolumeOff: ImageVector
132
        
133
        // File and folder icons
134
        val Folder: ImageVector
135
        val FolderOpen: ImageVector
136
        val InsertDriveFile: ImageVector
137
        val CloudUpload: ImageVector
138
        val CloudDownload: ImageVector
139
        
140
        // Communication icons
141
        val Call: ImageVector
142
        val Message: ImageVector
143
        val Chat: ImageVector
144
        val VideoCall: ImageVector
145
        
146
        // Toggle and status icons
147
        val Check: ImageVector
148
        val CheckCircle: ImageVector
149
        val Error: ImageVector
150
        val Warning: ImageVector
151
        val Visibility: ImageVector
152
        val VisibilityOff: ImageVector
153
        
154
        // Additional utility icons
155
        val CalendarToday: ImageVector
156
        val Schedule: ImageVector
157
        val Language: ImageVector
158
        val Star: ImageVector
159
        val StarBorder: ImageVector
160
        val ThumbUp: ImageVector
161
        val ThumbDown: ImageVector
162
    }
163
}
164
```
165

166
### Outlined Icons Collection
167

168
Outlined variants of Material icons for iOS-style visual hierarchy.
169

170
```kotlin { .api }
171
object Icons {
172
    object Outlined {
173
        // Navigation icons (outlined variants)
174
        val ArrowBack: ImageVector
175
        val ArrowForward: ImageVector
176
        val Menu: ImageVector
177
        val Close: ImageVector
178
        
179
        // Action icons (outlined variants)
180
        val Add: ImageVector
181
        val Remove: ImageVector
182
        val Edit: ImageVector
183
        val Delete: ImageVector
184
        val Search: ImageVector
185
        val Settings: ImageVector
186
        
187
        // Content icons (outlined variants)
188
        val Home: ImageVector
189
        val Person: ImageVector
190
        val Email: ImageVector
191
        val LocationOn: ImageVector
192
        val Favorite: ImageVector
193
        val FavoriteBorder: ImageVector
194
        val Share: ImageVector
195
        val ShoppingCart: ImageVector
196
        val Notifications: ImageVector
197
        val NotificationsNone: ImageVector
198
        
199
        // File and folder icons (outlined variants)
200
        val Folder: ImageVector
201
        val FolderOpen: ImageVector
202
        val InsertDriveFile: ImageVector
203
        
204
        // Status icons (outlined variants)
205
        val CheckCircle: ImageVector
206
        val RadioButtonUnchecked: ImageVector
207
        val Star: ImageVector
208
        val StarBorder: ImageVector
209
    }
210
}
211
```
212

213
### Auto-Mirrored Icons
214

215
RTL-aware icons that automatically mirror in right-to-left layouts, essential for iOS internationalization.
216

217
```kotlin { .api }
218
object Icons {
219
    object AutoMirrored {
220
        object Filled {
221
            // Navigation icons that mirror for RTL
222
            val ArrowBack: ImageVector
223
            val ArrowForward: ImageVector
224
            val KeyboardArrowLeft: ImageVector
225
            val KeyboardArrowRight: ImageVector
226
            val LastPage: ImageVector
227
            val FirstPage: ImageVector
228
            
229
            // Content flow icons
230
            val Send: ImageVector
231
            val Reply: ImageVector
232
            val Forward: ImageVector
233
            val Undo: ImageVector
234
            val Redo: ImageVector
235
            
236
            // List and menu icons
237
            val List: ImageVector
238
            val MenuOpen: ImageVector
239
            val Sort: ImageVector
240
        }
241
        
242
        object Outlined {
243
            // Outlined variants of auto-mirrored icons
244
            val ArrowBack: ImageVector
245
            val ArrowForward: ImageVector
246
            val KeyboardArrowLeft: ImageVector
247
            val KeyboardArrowRight: ImageVector
248
            val Send: ImageVector
249
            val Reply: ImageVector
250
        }
251
    }
252
}
253
```
254

255
### Custom Icon Creation
256

257
Tools for creating custom Material icons with iOS-appropriate styling.
258

259
```kotlin { .api }
260
/**
261
 * Create a custom Material icon using vector paths
262
 * @param name The name for this icon
263
 * @param defaultWidth The intrinsic width of this icon
264
 * @param defaultHeight The intrinsic height of this icon
265
 * @param viewportWidth The viewport width, used for scaling the path data
266
 * @param viewportHeight The viewport height, used for scaling the path data
267
 * @param autoMirror Whether this icon should auto-mirror in RTL layouts
268
 * @param content Lambda to provide path data for the icon
269
 */
270
inline fun materialIcon(
271
    name: String,
272
    defaultWidth: Dp = 24.dp,
273
    defaultHeight: Dp = 24.dp,
274
    viewportWidth: Float = 24f,
275
    viewportHeight: Float = 24f,
276
    autoMirror: Boolean = false,
277
    crossinline content: ImageVector.Builder.() -> ImageVector.Builder
278
): ImageVector
279

280
/**
281
 * Add a path to a Material icon
282
 * @param pathData The path data as a string (SVG path format)
283
 * @param fill The fill color for this path
284
 * @param fillAlpha The alpha value for the fill
285
 * @param stroke The stroke color for this path
286
 * @param strokeAlpha The alpha value for the stroke
287
 * @param strokeLineWidth The width of the stroke
288
 * @param strokeLineCap The stroke line cap style
289
 * @param strokeLineJoin The stroke line join style
290
 * @param strokeLineMiter The stroke line miter limit
291
 * @param pathFillType The fill type for this path
292
 */
293
fun ImageVector.Builder.materialPath(
294
    pathData: String,
295
    fill: Brush? = SolidColor(Color.Black),
296
    fillAlpha: Float = 1f,
297
    stroke: Brush? = null,
298
    strokeAlpha: Float = 1f,
299
    strokeLineWidth: Float = 0f,
300
    strokeLineCap: StrokeCap = StrokeCap.Butt,
301
    strokeLineJoin: StrokeJoin = StrokeJoin.Miter,
302
    strokeLineMiter: Float = 4f,
303
    pathFillType: PathFillType = PathFillType.NonZero
304
): ImageVector.Builder
305
```
306

307
**Custom Icon Examples:**
308

309
```kotlin
310
// Create a custom icon
311
val CustomHomeIcon = materialIcon(
312
    name = "CustomHome",
313
    autoMirror = false
314
) {
315
    materialPath(
316
        pathData = "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z",
317
        fill = SolidColor(Color.Black)
318
    )
319
}
320

321
// Use custom icon in component
322
Icon(
323
    imageVector = CustomHomeIcon,
324
    contentDescription = "Custom Home",
325
    tint = MaterialTheme.colors.primary
326
)
327

328
// RTL-aware custom icon
329
val CustomArrowIcon = materialIcon(
330
    name = "CustomArrow",
331
    autoMirror = true  // Will mirror in RTL layouts
332
) {
333
    materialPath(
334
        pathData = "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
335
    )
336
}
337
```
338

339
### Extended Material Icons
340

341
Additional icon collections available as separate dependencies for comprehensive iOS app development.
342

343
```kotlin { .api }
344
// Extended icons dependency (separate from core material)
345
// implementation("org.jetbrains.compose.material:material-icons-extended:1.8.2")
346

347
object Icons {
348
    object Filled {
349
        // Extended collection includes hundreds of additional icons
350
        val AccountBalance: ImageVector
351
        val AccountBox: ImageVector
352
        val AccountCircle: ImageVector
353
        val Adb: ImageVector
354
        val AddAPhoto: ImageVector
355
        val AddAlarm: ImageVector
356
        val AddAlert: ImageVector
357
        val AddBox: ImageVector
358
        val AddBusiness: ImageVector
359
        val AddCall: ImageVector
360
        val AddCard: ImageVector
361
        val AddChart: ImageVector
362
        val AddCircle: ImageVector
363
        val AddCircleOutline: ImageVector
364
        val AddComment: ImageVector
365
        val AddIcCall: ImageVector
366
        val AddLocation: ImageVector
367
        val AddLocationAlt: ImageVector
368
        val AddPhotoAlternate: ImageVector
369
        val AddRoad: ImageVector
370
        val AddShoppingCart: ImageVector
371
        val AddTask: ImageVector
372
        val AddToDrive: ImageVector
373
        val AddToHomeScreen: ImageVector
374
        val AddToPhotos: ImageVector
375
        val AddToQueue: ImageVector
376
        val Adjust: ImageVector
377
        val AdminPanelSettings: ImageVector
378
        val Agriculture: ImageVector
379
        val AirlineSeatFlat: ImageVector
380
        val AirlineSeatFlatAngled: ImageVector
381
        // ... hundreds more icons
382
    }
383
}
384
```
385

386
## iOS-Specific Icon Considerations
387

388
### Icon Sizing and Touch Targets
389

390
```kotlin { .api }
391
// Standard iOS icon sizes
392
object iOSIconSizes {
393
    val Small: Dp = 16.dp      // Small icons, status indicators
394
    val Medium: Dp = 24.dp     // Standard UI icons (Material default)
395
    val Large: Dp = 32.dp      // Prominent actions, tab icons
396
    val XLarge: Dp = 44.dp     // Touch targets, main actions
397
}
398

399
// iOS-appropriate touch targets
400
@Composable
401
fun iOSIconButton(
402
    onClick: () -> Unit,
403
    icon: ImageVector,
404
    contentDescription: String?,
405
    modifier: Modifier = Modifier
406
) {
407
    IconButton(
408
        onClick = onClick,
409
        modifier = modifier.size(44.dp) // iOS minimum touch target
410
    ) {
411
        Icon(
412
            imageVector = icon,
413
            contentDescription = contentDescription,
414
            modifier = Modifier.size(24.dp) // Visual icon size
415
        )
416
    }
417
}
418
```
419

420
### SF Symbols Integration
421

422
For native iOS development, Material icons can be supplemented with SF Symbols through platform-specific implementations.
423

424
```kotlin { .api }
425
// Platform-specific icon loading (expect/actual pattern)
426
expect fun platformIcon(name: String): ImageVector
427

428
// iOS implementation would use SF Symbols
429
// actual fun platformIcon(name: String): ImageVector {
430
//     return when (name) {
431
//         "system.house" -> Icons.Default.Home
432
//         "person.circle" -> Icons.Default.Person
433
//         // Map SF Symbol names to Material icons
434
//     }
435
// }
436
```
437

438
### Icon Theming and Accessibility
439

440
```kotlin { .api }
441
/**
442
 * iOS-optimized icon theming that respects system accessibility settings
443
 */
444
@Composable
445
fun ThemedIcon(
446
    imageVector: ImageVector,
447
    contentDescription: String?,
448
    modifier: Modifier = Modifier,
449
    emphasized: Boolean = false
450
) {
451
    Icon(
452
        imageVector = imageVector,
453
        contentDescription = contentDescription,
454
        modifier = modifier,
455
        tint = if (emphasized) {
456
            MaterialTheme.colors.primary
457
        } else {
458
            MaterialTheme.colors.onSurface.copy(
459
                alpha = if (MaterialTheme.colors.isLight) 0.6f else 0.8f
460
            )
461
        }
462
    )
463
}
464
```
465

466
**Usage Examples:**
467

468
```kotlin
469
// iOS-style icon usage patterns
470
@Composable
471
fun iOSStyleIconUsage() {
472
    // Tab bar icons
473
    BottomNavigationItem(
474
        icon = { 
475
            ThemedIcon(
476
                imageVector = if (selected) Icons.Filled.Home else Icons.Outlined.Home,
477
                contentDescription = "Home"
478
            )
479
        },
480
        selected = selected,
481
        onClick = onClick
482
    )
483
    
484
    // Navigation bar icons with proper touch targets
485
    iOSIconButton(
486
        onClick = { /* navigate back */ },
487
        icon = Icons.AutoMirrored.Filled.ArrowBack,
488
        contentDescription = "Back"
489
    )
490
    
491
    // Status and information icons
492
    Row(verticalAlignment = Alignment.CenterVertically) {
493
        ThemedIcon(
494
            imageVector = Icons.Default.Warning,
495
            contentDescription = "Warning",
496
            emphasized = true
497
        )
498
        Spacer(modifier = Modifier.width(8.dp))
499
        Text("Important message")
500
    }
501
}
502
```