Add custom icon for checkbox component

Author: tux2nicolae

src/components/Checkbox/Checkbox.tsx

@@ -35,6 +35,10 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: (props: { size: number; color: string }) => JSX.Element;
 };
 
 /**

src/components/Checkbox/CheckboxAndroid.tsx

@@ -41,6 +41,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: (props: { size: number; color: string }) => JSX.Element;
 };
 
 // From https://material.io/design/motion/speed.html#duration
@@ -59,6 +63,7 @@ const CheckboxAndroid = ({
   disabled,
   onPress,
   testID,
+  icon: customIcon,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -134,13 +139,15 @@ const CheckboxAndroid = ({
       theme={theme}
     >
       <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={selectionControlColor}
-          direction="ltr"
-        />
+        {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

@@ -32,6 +32,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: (props: { size: number; color: string }) => JSX.Element;
 };
 
 /**
@@ -47,6 +51,7 @@ const CheckboxIOS = ({
   onPress,
   theme: themeOverrides,
   testID,
+  icon: customIcon,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -77,13 +82,15 @@ const CheckboxIOS = ({
       theme={theme}
     >
       <View style={{ opacity }}>
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={checkedColor}
-          direction="ltr"
-        />
+        {customIcon?.({ size: 24, color: checkedColor }) || (
+          <MaterialCommunityIcon
+            allowFontScaling={false}
+            name={icon}
+            size={24}
+            color={checkedColor}
+            direction="ltr"
+          />
+        )}
       </View>
     </TouchableRipple>
   );

src/components/Checkbox/CheckboxItem.tsx

@@ -97,6 +97,10 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * custom icon.
+   */
+  icon?: (props: { size: number; color: string }) => JSX.Element;
   /**
    * Checkbox control position.
    */
@@ -136,6 +140,7 @@ const CheckboxItem = ({
   labelStyle,
   theme: themeOverrides,
   testID,
+  icon,
   mode,
   position = 'trailing',
   accessibilityLabel = label,
@@ -147,7 +152,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;