CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-org-jetbrains-compose-material--material-uikitarm64

Material Design components for Compose Multiplatform, specifically optimized for iOS devices running on ARM64 architecture

Pending
Overview
Eval results
Files

icons.mddocs/

Material Icons

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

Capabilities

Icon Component

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
)

Default Icons Collection

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 Icons Collection

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
    }
}

Auto-Mirrored Icons

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
        }
    }
}

Custom Icon Creation

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.Builder

Custom 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"
    )
}

Extended Material Icons

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
    }
}

iOS-Specific Icon Considerations

Icon Sizing and Touch Targets

// 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
        )
    }
}

SF Symbols Integration

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
//     }
// }

Icon Theming and Accessibility

/**
 * 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

docs

core-components.md

icons.md

index.md

input-components.md

ios-integration.md

navigation.md

theming.md

tile.json