fix: use same color for button text and icon (#1894)

Author: Trancever

example/src/Examples/ButtonExample.tsx

@@ -70,12 +70,13 @@ const ButtonExample = () => {
             Loading
           </Button>
           <Button
+            icon="heart"
             mode="outlined"
             onPress={() => {}}
             style={styles.button}
             labelStyle={{
               fontWeight: '800',
-              fontSize: 18,
+              fontSize: 24,
             }}
           >
             Custom Font

src/components/Button.tsx

@@ -245,6 +245,10 @@ class Button extends React.Component<Props, State> {
         ? StyleSheet.flatten(style).borderRadius || roundness
         : roundness,
     };
+
+    const { color: customLabelColor, fontSize: customLabelSize } =
+      StyleSheet.flatten(labelStyle) || {};
+
     const textStyle = { color: textColor, ...font };
     const elevation =
       disabled || mode !== 'contained' ? 0 : this.state.elevation;
@@ -279,13 +283,17 @@ class Button extends React.Component<Props, State> {
           <View style={[styles.content, contentStyle]}>
             {icon && loading !== true ? (
               <View style={styles.icon}>
-                <Icon source={icon} size={16} color={textColor} />
+                <Icon
+                  source={icon}
+                  size={customLabelSize || 16}
+                  color={customLabelColor || textColor}
+                />
               </View>
             ) : null}
             {loading ? (
               <ActivityIndicator
-                size={16}
-                color={textColor}
+                size={customLabelSize || 16}
+                color={customLabelColor || textColor}
                 style={styles.icon}
               />
             ) : null}
@@ -323,7 +331,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   icon: {
-    width: 16,
     marginLeft: 12,
     marginRight: -4,
   },

src/components/__tests__/__snapshots__/Button.test.js.snap

@@ -240,7 +240,6 @@ exports[`renders button with icon 1`] = `
           Object {
             "marginLeft": 12,
             "marginRight": -4,
-            "width": 16,
           }
         }
       >
@@ -576,7 +575,6 @@ exports[`renders loading button 1`] = `
             Object {
               "marginLeft": 12,
               "marginRight": -4,
-              "width": 16,
             },
           ]
         }