Merge pull request #408 from AnnMarieW/update-checkbox

added custom icons to Checkbox

CHANGELOG.md

@@ -2,10 +2,15 @@
 
 # Unreleased
 
+### Added
+
+- Enabled custom icons in `Checkbox` Added `icon` and `indeterminateIcon` props #408 by @snehilvj 
+
 ### Fixed
 -  In MultiSelect, enable the debounce to work when deleting items when the dropdown is closed when debounce is a number. #407 by @AnnMarieW
 -  In MultiSelect and Select, fixed regression where it was not possible to update both the value and data in the same callback #412
 
+
 # 0.14.7
 
 ### Added

src/ts/components/core/checkbox/Checkbox.tsx

@@ -42,6 +42,10 @@ interface Props
     checked?: boolean;
     /** Whether component is disabled */
     disabled?: boolean;
+    /** Icon */
+    icon?: React.ReactNode;
+    /** Indeterminate icon */
+    indeterminateIcon?: React.ReactNode;
 }
 
 /** Checkbox */
@@ -52,15 +56,24 @@ const Checkbox = (props: Props) => {
         persistence,
         persisted_props,
         persistence_type,
+        icon,
+        indeterminateIcon,
         ...others
     } = props;
 
+    const iconFunc = ({ indeterminate, ...others }) => {
+        const selected: any = indeterminate ? indeterminateIcon : icon;
+        Object.assign(selected.props._dashprivate_layout.props, others);
+        return selected;
+    };
+
     return (
         <MantineCheckbox
             data-dash-is-loading={
                 (loading_state && loading_state.is_loading) || undefined
             }
             onChange={(ev) => setProps({ checked: ev.currentTarget.checked })}
+            icon={icon || indeterminateIcon ? iconFunc : undefined}
             {...others}
         />
     );