Add custom icon for checkbox component

src/components/Checkbox/Checkbox.tsx

@@ -5,6 +5,7 @@ import CheckboxAndroid from './CheckboxAndroid';
 import CheckboxIOS from './CheckboxIOS';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
+import type { IconSource } from '../Icon';
 
 export type Props = {
   /**
@@ -35,6 +36,10 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: IconSource;
 };
 
 /**

src/components/Checkbox/CheckboxAndroid.tsx

@@ -9,6 +9,7 @@ import {
 import { getAndroidSelectionControlColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
+import Icon, { IconSource } from '../Icon';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 
@@ -41,6 +42,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: IconSource;
 };
 
 // From https://material.io/design/motion/speed.html#duration
@@ -59,6 +64,7 @@ const CheckboxAndroid = ({
   disabled,
   onPress,
   testID,
+  icon: customIcon,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -134,13 +140,17 @@ const CheckboxAndroid = ({
       theme={theme}
     >
       <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={selectionControlColor}
-          direction="ltr"
-        />
+        {customIcon ? (
+          <Icon source={customIcon} size={24} color={selectionControlColor} />
+        ) : (
+          <MaterialCommunityIcon
+            allowFontScaling={false}
+            name={icon}
+            size={24}
+            color={selectionControlColor}
+            direction="ltr"
+          />
+        )}
         <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
           <Animated.View
             style={[

src/components/Checkbox/CheckboxIOS.tsx

@@ -4,6 +4,7 @@ import { GestureResponderEvent, StyleSheet, View } from 'react-native';
 import { getSelectionControlIOSColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
+import Icon, { type IconSource } from '../Icon';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 
@@ -32,6 +33,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: IconSource;
 };
 
 /**
@@ -47,6 +52,7 @@ const CheckboxIOS = ({
   onPress,
   theme: themeOverrides,
   testID,
+  icon: customIcon,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -77,13 +83,17 @@ const CheckboxIOS = ({
       theme={theme}
     >
       <View style={{ opacity }}>
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={checkedColor}
-          direction="ltr"
-        />
+        {customIcon ? (
+          <Icon source={customIcon} size={24} color={checkedColor} />
+        ) : (
+          <MaterialCommunityIcon
+            allowFontScaling={false}
+            name={icon}
+            size={24}
+            color={checkedColor}
+            direction="ltr"
+          />
+        )}
       </View>
     </TouchableRipple>
   );

src/components/Checkbox/CheckboxItem.tsx

@@ -15,6 +15,7 @@ import CheckboxAndroid from './CheckboxAndroid';
 import CheckboxIOS from './CheckboxIOS';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp, MD3TypescaleKey } from '../../types';
+import { IconSource } from '../Icon';
 import TouchableRipple, {
   Props as TouchableRippleProps,
 } from '../TouchableRipple/TouchableRipple';
@@ -99,6 +100,10 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: IconSource;
   /**
    * Checkbox control position.
    */
@@ -142,6 +147,7 @@ const CheckboxItem = ({
   labelStyle,
   theme: themeOverrides,
   testID,
+  icon,
   mode,
   position = 'trailing',
   accessibilityLabel = label,
@@ -154,7 +160,7 @@ const CheckboxItem = ({
   ...props
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const checkboxProps = { ...props, status, theme, disabled };
+  const checkboxProps = { ...props, status, theme, disabled, icon };
   const isLeading = position === 'leading';
   let checkbox;