fix: keep icon color if defined as part of button (#479)

.changeset/dirty-books-argue.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+fix: keep icon color if defined as part of button

packages/components/src/button/button.stories.tsx

@@ -1,3 +1,4 @@
+import { PopupIcon } from '@status-im/icons'
 import { action } from '@storybook/addon-actions'
 import { Stack } from 'tamagui'
 
@@ -82,6 +83,14 @@ export const PrimaryIconBefore: Story = {
   },
 }
 
+export const PrimaryIconBeforeDifferentColor: Story = {
+  name: 'Primary icon before/Different color',
+  args: {
+    children: 'Click me',
+    icon: <PopupIcon size={20} color="$yellow-50" />,
+  },
+}
+
 export const PrimaryIconAfter: Story = {
   name: 'Primary/Icon after',
   args: {
@@ -89,6 +98,15 @@ export const PrimaryIconAfter: Story = {
     iconAfter: icon,
   },
 }
+
+export const PrimaryIconAfterDifferentColor: Story = {
+  name: 'Primary/Icon after/Different color',
+  args: {
+    children: 'Click me',
+    iconAfter: <PopupIcon size={20} color="$yellow-50" />,
+  },
+}
+
 export const PrimaryIconOnly: Story = {
   name: 'Primary/Icon only',
   args: {

packages/components/src/button/button.tsx

@@ -82,11 +82,17 @@ const Button = (props: Props, ref: Ref<View>) => {
       iconOnly={iconOnly}
       width={fullWidth ? '100%' : 'auto'}
     >
-      {icon ? cloneElement(icon, { color: textColor || '$neutral-40' }) : null}
+      {icon
+        ? cloneElement(icon, {
+            color: iconOnly ? textColor : icon.props.color ?? textColor,
+          })
+        : null}
       <Text weight="medium" color={textColor} size={textSize}>
         {children}
       </Text>
-      {iconAfter ? cloneElement(iconAfter, { color: textColor }) : null}
+      {iconAfter
+        ? cloneElement(iconAfter, { color: iconAfter.props.color ?? textColor })
+        : null}
     </Base>
   )
 }