feat: add size prop to List.Icon component

src/components/List/ListIcon.tsx

@@ -19,6 +19,10 @@ export type Props = {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * Size of the icon.
+   */
+  size?: number;
 };
 
 const ICON_SIZE = 24;
@@ -34,7 +38,7 @@ const ICON_SIZE = 24;
  * const MyComponent = () => (
  *   <>
  *     <List.Icon color={MD3Colors.tertiary70} icon="folder" />
- *     <List.Icon color={MD3Colors.tertiary70} icon="equal" />
+ *     <List.Icon color={MD3Colors.tertiary70} size={20} icon="equal" />
  *     <List.Icon color={MD3Colors.tertiary70} icon="calendar" />
  *   </>
  * );
@@ -47,15 +51,17 @@ const ListIcon = ({
   color: iconColor,
   style,
   theme: themeOverrides,
+  size,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const iconSize = size ? size : ICON_SIZE;
 
   return (
     <View
       style={[theme.isV3 ? styles.itemV3 : styles.item, style]}
       pointerEvents="box-none"
     >
-      <Icon source={icon} size={ICON_SIZE} color={iconColor} theme={theme} />
+      <Icon source={icon} size={iconSize} color={iconColor} theme={theme} />
     </View>
   );
 };

src/components/__tests__/ListItem.test.tsx

@@ -159,3 +159,30 @@ it('renders list item with custom content style', () => {
 
   expect(getByTestId('list-item-content')).toHaveStyle(styles.content);
 });
+
+it('renders list item with custom icon size with left and right items', () => {
+  const tree = render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      testID={testID}
+      left={() => <Text>GG</Text>}
+      right={() => <ListIcon size={10} icon="folder" />}
+    />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders list item on left with a icon that has a custom size', () => {
+  const tree = render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      testID={testID}
+      left={() => <ListIcon size={10} icon="folder" />}
+    />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});