Material Design components for Compose Multiplatform, specifically optimized for iOS devices running on ARM64 architecture
—
Comprehensive icon system with iOS-specific optimizations, automatic RTL support, and seamless integration with Material Design theming.
Vector icon display component with Material theming and iOS-optimized rendering.
/**
* Material Design icon component with iOS-optimized vector rendering
* @param imageVector ImageVector to draw inside this icon
* @param contentDescription Text used by accessibility services to describe what this icon represents
* @param modifier Modifier to be applied to this icon
* @param tint Tint to be applied to this icon
*/
@Composable
fun Icon(
imageVector: ImageVector,
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)
/**
* Material Design icon component supporting different icon sources
* @param painter Painter to draw inside this icon
* @param contentDescription Text used by accessibility services to describe what this icon represents
* @param modifier Modifier to be applied to this icon
* @param tint Tint to be applied to this icon
*/
@Composable
fun Icon(
painter: Painter,
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)
/**
* Material Design icon component for bitmap icons
* @param bitmap ImageBitmap to draw inside this icon
* @param contentDescription Text used by accessibility services to describe what this icon represents
* @param modifier Modifier to be applied to this icon
* @param tint Tint to be applied to this icon
*/
@Composable
fun Icon(
bitmap: ImageBitmap,
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)Usage Examples:
// Basic icon usage
Icon(
imageVector = Icons.Default.Home,
contentDescription = "Home"
)
// Icon with custom tint
Icon(
imageVector = Icons.Default.Favorite,
contentDescription = "Favorite",
tint = MaterialTheme.colors.error
)
// Icon with sizing
Icon(
imageVector = Icons.Default.Add,
contentDescription = "Add",
modifier = Modifier.size(32.dp)
)
// Icon from painter resource
Icon(
painter = painterResource(id = R.drawable.custom_icon),
contentDescription = "Custom Icon",
tint = MaterialTheme.colors.primary
)Filled Material icons optimized for iOS display and touch targets.
object Icons {
object Default {
// Navigation icons
val ArrowBack: ImageVector
val ArrowForward: ImageVector
val Menu: ImageVector
val Close: ImageVector
val MoreHoriz: ImageVector
val MoreVert: ImageVector
// Action icons
val Add: ImageVector
val Remove: ImageVector
val Edit: ImageVector
val Delete: ImageVector
val Search: ImageVector
val Refresh: ImageVector
val Settings: ImageVector
val Info: ImageVector
val Help: ImageVector
// Content icons
val Home: ImageVector
val Person: ImageVector
val Email: ImageVector
val Phone: ImageVector
val LocationOn: ImageVector
val Favorite: ImageVector
val Share: ImageVector
val ShoppingCart: ImageVector
val Notifications: ImageVector
// Media icons
val PlayArrow: ImageVector
val Pause: ImageVector
val Stop: ImageVector
val VolumeUp: ImageVector
val VolumeDown: ImageVector
val VolumeOff: ImageVector
// File and folder icons
val Folder: ImageVector
val FolderOpen: ImageVector
val InsertDriveFile: ImageVector
val CloudUpload: ImageVector
val CloudDownload: ImageVector
// Communication icons
val Call: ImageVector
val Message: ImageVector
val Chat: ImageVector
val VideoCall: ImageVector
// Toggle and status icons
val Check: ImageVector
val CheckCircle: ImageVector
val Error: ImageVector
val Warning: ImageVector
val Visibility: ImageVector
val VisibilityOff: ImageVector
// Additional utility icons
val CalendarToday: ImageVector
val Schedule: ImageVector
val Language: ImageVector
val Star: ImageVector
val StarBorder: ImageVector
val ThumbUp: ImageVector
val ThumbDown: ImageVector
}
}Outlined variants of Material icons for iOS-style visual hierarchy.
object Icons {
object Outlined {
// Navigation icons (outlined variants)
val ArrowBack: ImageVector
val ArrowForward: ImageVector
val Menu: ImageVector
val Close: ImageVector
// Action icons (outlined variants)
val Add: ImageVector
val Remove: ImageVector
val Edit: ImageVector
val Delete: ImageVector
val Search: ImageVector
val Settings: ImageVector
// Content icons (outlined variants)
val Home: ImageVector
val Person: ImageVector
val Email: ImageVector
val LocationOn: ImageVector
val Favorite: ImageVector
val FavoriteBorder: ImageVector
val Share: ImageVector
val ShoppingCart: ImageVector
val Notifications: ImageVector
val NotificationsNone: ImageVector
// File and folder icons (outlined variants)
val Folder: ImageVector
val FolderOpen: ImageVector
val InsertDriveFile: ImageVector
// Status icons (outlined variants)
val CheckCircle: ImageVector
val RadioButtonUnchecked: ImageVector
val Star: ImageVector
val StarBorder: ImageVector
}
}RTL-aware icons that automatically mirror in right-to-left layouts, essential for iOS internationalization.
object Icons {
object AutoMirrored {
object Filled {
// Navigation icons that mirror for RTL
val ArrowBack: ImageVector
val ArrowForward: ImageVector
val KeyboardArrowLeft: ImageVector
val KeyboardArrowRight: ImageVector
val LastPage: ImageVector
val FirstPage: ImageVector
// Content flow icons
val Send: ImageVector
val Reply: ImageVector
val Forward: ImageVector
val Undo: ImageVector
val Redo: ImageVector
// List and menu icons
val List: ImageVector
val MenuOpen: ImageVector
val Sort: ImageVector
}
object Outlined {
// Outlined variants of auto-mirrored icons
val ArrowBack: ImageVector
val ArrowForward: ImageVector
val KeyboardArrowLeft: ImageVector
val KeyboardArrowRight: ImageVector
val Send: ImageVector
val Reply: ImageVector
}
}
}Tools for creating custom Material icons with iOS-appropriate styling.
/**
* Create a custom Material icon using vector paths
* @param name The name for this icon
* @param defaultWidth The intrinsic width of this icon
* @param defaultHeight The intrinsic height of this icon
* @param viewportWidth The viewport width, used for scaling the path data
* @param viewportHeight The viewport height, used for scaling the path data
* @param autoMirror Whether this icon should auto-mirror in RTL layouts
* @param content Lambda to provide path data for the icon
*/
inline fun materialIcon(
name: String,
defaultWidth: Dp = 24.dp,
defaultHeight: Dp = 24.dp,
viewportWidth: Float = 24f,
viewportHeight: Float = 24f,
autoMirror: Boolean = false,
crossinline content: ImageVector.Builder.() -> ImageVector.Builder
): ImageVector
/**
* Add a path to a Material icon
* @param pathData The path data as a string (SVG path format)
* @param fill The fill color for this path
* @param fillAlpha The alpha value for the fill
* @param stroke The stroke color for this path
* @param strokeAlpha The alpha value for the stroke
* @param strokeLineWidth The width of the stroke
* @param strokeLineCap The stroke line cap style
* @param strokeLineJoin The stroke line join style
* @param strokeLineMiter The stroke line miter limit
* @param pathFillType The fill type for this path
*/
fun ImageVector.Builder.materialPath(
pathData: String,
fill: Brush? = SolidColor(Color.Black),
fillAlpha: Float = 1f,
stroke: Brush? = null,
strokeAlpha: Float = 1f,
strokeLineWidth: Float = 0f,
strokeLineCap: StrokeCap = StrokeCap.Butt,
strokeLineJoin: StrokeJoin = StrokeJoin.Miter,
strokeLineMiter: Float = 4f,
pathFillType: PathFillType = PathFillType.NonZero
): ImageVector.BuilderCustom Icon Examples:
// Create a custom icon
val CustomHomeIcon = materialIcon(
name = "CustomHome",
autoMirror = false
) {
materialPath(
pathData = "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z",
fill = SolidColor(Color.Black)
)
}
// Use custom icon in component
Icon(
imageVector = CustomHomeIcon,
contentDescription = "Custom Home",
tint = MaterialTheme.colors.primary
)
// RTL-aware custom icon
val CustomArrowIcon = materialIcon(
name = "CustomArrow",
autoMirror = true // Will mirror in RTL layouts
) {
materialPath(
pathData = "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
)
}Additional icon collections available as separate dependencies for comprehensive iOS app development.
// Extended icons dependency (separate from core material)
// implementation("org.jetbrains.compose.material:material-icons-extended:1.8.2")
object Icons {
object Filled {
// Extended collection includes hundreds of additional icons
val AccountBalance: ImageVector
val AccountBox: ImageVector
val AccountCircle: ImageVector
val Adb: ImageVector
val AddAPhoto: ImageVector
val AddAlarm: ImageVector
val AddAlert: ImageVector
val AddBox: ImageVector
val AddBusiness: ImageVector
val AddCall: ImageVector
val AddCard: ImageVector
val AddChart: ImageVector
val AddCircle: ImageVector
val AddCircleOutline: ImageVector
val AddComment: ImageVector
val AddIcCall: ImageVector
val AddLocation: ImageVector
val AddLocationAlt: ImageVector
val AddPhotoAlternate: ImageVector
val AddRoad: ImageVector
val AddShoppingCart: ImageVector
val AddTask: ImageVector
val AddToDrive: ImageVector
val AddToHomeScreen: ImageVector
val AddToPhotos: ImageVector
val AddToQueue: ImageVector
val Adjust: ImageVector
val AdminPanelSettings: ImageVector
val Agriculture: ImageVector
val AirlineSeatFlat: ImageVector
val AirlineSeatFlatAngled: ImageVector
// ... hundreds more icons
}
}// Standard iOS icon sizes
object iOSIconSizes {
val Small: Dp = 16.dp // Small icons, status indicators
val Medium: Dp = 24.dp // Standard UI icons (Material default)
val Large: Dp = 32.dp // Prominent actions, tab icons
val XLarge: Dp = 44.dp // Touch targets, main actions
}
// iOS-appropriate touch targets
@Composable
fun iOSIconButton(
onClick: () -> Unit,
icon: ImageVector,
contentDescription: String?,
modifier: Modifier = Modifier
) {
IconButton(
onClick = onClick,
modifier = modifier.size(44.dp) // iOS minimum touch target
) {
Icon(
imageVector = icon,
contentDescription = contentDescription,
modifier = Modifier.size(24.dp) // Visual icon size
)
}
}For native iOS development, Material icons can be supplemented with SF Symbols through platform-specific implementations.
// Platform-specific icon loading (expect/actual pattern)
expect fun platformIcon(name: String): ImageVector
// iOS implementation would use SF Symbols
// actual fun platformIcon(name: String): ImageVector {
// return when (name) {
// "system.house" -> Icons.Default.Home
// "person.circle" -> Icons.Default.Person
// // Map SF Symbol names to Material icons
// }
// }/**
* iOS-optimized icon theming that respects system accessibility settings
*/
@Composable
fun ThemedIcon(
imageVector: ImageVector,
contentDescription: String?,
modifier: Modifier = Modifier,
emphasized: Boolean = false
) {
Icon(
imageVector = imageVector,
contentDescription = contentDescription,
modifier = modifier,
tint = if (emphasized) {
MaterialTheme.colors.primary
} else {
MaterialTheme.colors.onSurface.copy(
alpha = if (MaterialTheme.colors.isLight) 0.6f else 0.8f
)
}
)
}Usage Examples:
// iOS-style icon usage patterns
@Composable
fun iOSStyleIconUsage() {
// Tab bar icons
BottomNavigationItem(
icon = {
ThemedIcon(
imageVector = if (selected) Icons.Filled.Home else Icons.Outlined.Home,
contentDescription = "Home"
)
},
selected = selected,
onClick = onClick
)
// Navigation bar icons with proper touch targets
iOSIconButton(
onClick = { /* navigate back */ },
icon = Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = "Back"
)
// Status and information icons
Row(verticalAlignment = Alignment.CenterVertically) {
ThemedIcon(
imageVector = Icons.Default.Warning,
contentDescription = "Warning",
emphasized = true
)
Spacer(modifier = Modifier.width(8.dp))
Text("Important message")
}
}Install with Tessl CLI
npx tessl i tessl/maven-org-jetbrains-compose-material--material-uikitarm64