InputRowRadioButtons [nfc]: Accept icon, like other rows do

(Such as NestedNavRow, which I consulted for this implementation.)

Author: chrisbobbe

src/common/InputRowRadioButtons.js

@@ -14,6 +14,7 @@ import ZulipTextIntl from './ZulipTextIntl';
 import { IconRight } from './Icons';
 import type { AppNavigationMethods } from '../nav/AppNavigator';
 import { ThemeContext } from '../styles/theme';
+import type { SpecificIconType } from './Icons';
 
 type Item<TKey> = $ReadOnly<{|
   key: TKey,
@@ -32,6 +33,11 @@ type Item<TKey> = $ReadOnly<{|
 |}>;
 
 type Props<TItemKey> = $ReadOnly<{|
+  icon?: {|
+    +Component: SpecificIconType,
+    +color?: string,
+  |},
+
   /**
    * Component must be under the stack nav with the selectable-options screen.
    *
@@ -78,7 +84,7 @@ type Props<TItemKey> = $ReadOnly<{|
 export default function InputRowRadioButtons<TItemKey: string | number>(
   props: Props<TItemKey>,
 ): Node {
-  const { navigation, label, description, valueKey, items, onValueChange, search } = props;
+  const { navigation, label, description, valueKey, items, onValueChange, search, icon } = props;
 
   const screenKey: string = useRef(`selectable-options-${randString()}`).current;
 
@@ -153,6 +159,11 @@ export default function InputRowRadioButtons<TItemKey: string | number>(
           //   https://material.io/design/usability/accessibility.html#layout-and-typography
           minHeight: 48,
         },
+        iconFromProps: {
+          textAlign: 'center',
+          marginRight: 8,
+          color: icon?.color ?? themeData.color,
+        },
         textWrapper: {
           flex: 1,
           flexDirection: 'column',
@@ -169,12 +180,13 @@ export default function InputRowRadioButtons<TItemKey: string | number>(
           width: kRightArrowIconSize,
         },
       }),
-    [],
+    [themeData, icon],
   );
 
   return (
     <Touchable onPress={handleRowPressed}>
       <View style={styles.wrapper}>
+        {!!icon && <icon.Component size={24} style={styles.iconFromProps} />}
         <View style={styles.textWrapper}>
           <ZulipTextIntl text={label} />
           <ZulipTextIntl text={selectedItem.title} style={styles.valueTitle} />