Feat/list icon size

example/src/Examples/ListAccordionExample.tsx

@@ -15,14 +15,14 @@ const ListAccordionExample = () => {
     <ScreenWrapper>
       <List.Section title="Expandable list item">
         <List.Accordion
-          left={(props) => <List.Icon {...props} icon="folder" />}
+          left={(props) => <List.Icon iconSize={32} {...props} icon="folder" />}
           title="Expandable list item"
         >
           <List.Item title="List item 1" />
           <List.Item title="List item 2" />
         </List.Accordion>
         <List.Accordion
-          left={(props) => <List.Icon {...props} icon="folder" />}
+          left={(props) => <List.Icon iconSize={32} {...props} icon="folder" />}
           title="Start expanded"
           expanded={expanded}
           onPress={_handlePress}
@@ -43,15 +43,19 @@ const ListAccordionExample = () => {
       <Divider />
       <List.Section title="Expandable list with icons">
         <List.Accordion
-          left={(props) => <List.Icon {...props} icon="star" />}
+          left={(props) => <List.Icon iconSize={32} {...props} icon="star" />}
           title="Accordion item 1"
         >
           <List.Item
-            left={(props) => <List.Icon {...props} icon="thumb-up" />}
+            left={(props) => (
+              <List.Icon iconSize={32} {...props} icon="thumb-up" />
+            )}
             title="List item 1"
           />
           <List.Item
-            left={(props) => <List.Icon {...props} icon="thumb-down" />}
+            left={(props) => (
+              <List.Icon iconSize={32} {...props} icon="thumb-down" />
+            )}
             title="List item 2"
           />
         </List.Accordion>

example/src/Examples/ListAccordionGroupExample.tsx

@@ -19,22 +19,28 @@ const ListAccordionGroupExample = () => {
       <List.AccordionGroup>
         <List.Section title="Uncontrolled Accordion Group example">
           <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
+            left={(props) => (
+              <List.Icon iconSize={32} {...props} icon="folder" />
+            )}
             title="Expandable list item"
             id="1"
           >
             <List.Item title="List item 1" />
             <List.Item title="List item 2" />
           </List.Accordion>
           <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
+            left={(props) => (
+              <List.Icon iconSize={32} {...props} icon="folder" />
+            )}
             title="Expandable list item 2"
             id="2"
           >
             <List.Item title="List item 1" />
           </List.Accordion>
           <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
+            left={(props) => (
+              <List.Icon iconSize={32} {...props} icon="folder" />
+            )}
             title="Expandable list item 2"
             id="3"
           >
@@ -48,22 +54,28 @@ const ListAccordionGroupExample = () => {
       >
         <List.Section title="Controlled Accordion Group example">
           <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
+            left={(props) => (
+              <List.Icon iconSize={32} {...props} icon="folder" />
+            )}
             title="Expandable list item"
             id="1"
           >
             <List.Item title="List item 1" />
             <List.Item title="List item 2" />
           </List.Accordion>
           <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
+            left={(props) => (
+              <List.Icon iconSize={32} {...props} icon="folder" />
+            )}
             title="Expandable list item 2"
             id="2"
           >
             <List.Item title="List item 1" />
           </List.Accordion>
           <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
+            left={(props) => (
+              <List.Icon iconSize={32} {...props} icon="folder" />
+            )}
             title="Expandable list item 2"
             id="3"
           >

example/src/Examples/ListItemExample.tsx

@@ -39,34 +39,46 @@ const ListItemExample = () => {
       <List.Section title="With icon">
         <List.Item
           title="Headline"
-          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="account-outline" />
+          )}
         />
         <List.Item
           title="Headline"
           description="Supporting text"
-          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="account-outline" />
+          )}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
-          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="account-outline" />
+          )}
         />
         <Divider />
         <List.Item
           title="Headline"
-          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="account-outline" />
+          )}
           right={() => <CenteredCheckbox />}
         />
         <List.Item
           title="Headline"
           description="Supporting text"
-          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="account-outline" />
+          )}
           right={() => <CenteredCheckbox />}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
-          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="account-outline" />
+          )}
           right={() => <Checkbox status="checked" />}
         />
         <Divider />
@@ -276,19 +288,25 @@ const ListItemExample = () => {
         <Divider />
         <List.Item
           title="Headline"
-          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="account-outline" />
+          )}
           right={() => <Switch disabled style={styles.centered} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text"
-          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="account-outline" />
+          )}
           right={() => <Switch disabled style={styles.centered} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
-          left={(props) => <List.Icon {...props} icon="account-outline" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="account-outline" />
+          )}
           right={() => <Switch disabled />}
         />
         <Divider />

example/src/Examples/ListSectionExample.tsx

@@ -10,17 +10,21 @@ const ListSectionExample = () => {
       <List.Section>
         <List.Subheader>Single line</List.Subheader>
         <List.Item
-          left={(props) => <List.Icon {...props} icon="calendar" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="calendar" />
+          )}
           title="List item 1"
         />
         <List.Item
-          left={(props) => <List.Icon {...props} icon="wallet-giftcard" />}
+          left={(props) => (
+            <List.Icon iconSize={32} {...props} icon="wallet-giftcard" />
+          )}
           title="List item 2"
         />
         <List.Item
           title="List item 3"
-          left={(props) => <List.Icon {...props} icon="folder" />}
-          right={(props) => <List.Icon {...props} icon="equal" />}
+          left={(props) => <List.Icon iconSize={32} {...props} icon="folder" />}
+          right={(props) => <List.Icon iconSize={32} {...props} icon="equal" />}
         />
       </List.Section>
       <Divider />
@@ -45,7 +49,9 @@ const ListSectionExample = () => {
               accessibilityIgnoresInvertColors
             />
           )}
-          right={(props) => <List.Icon {...props} icon="information" />}
+          right={(props) => (
+            <List.Icon iconSize={32} {...props} icon="information" />
+          )}
           title="List item 2"
           description="Describes item 2"
         />
@@ -72,7 +78,9 @@ const ListSectionExample = () => {
               accessibilityIgnoresInvertColors
             />
           )}
-          right={(props) => <List.Icon {...props} icon="star-outline" />}
+          right={(props) => (
+            <List.Icon iconSize={32} {...props} icon="star-outline" />
+          )}
           title="List item 2"
           description="Describes item 2. Example of a very very long description."
         />
@@ -88,7 +96,9 @@ const ListSectionExample = () => {
               accessibilityIgnoresInvertColors
             />
           )}
-          right={(props) => <List.Icon {...props} icon="star-outline" />}
+          right={(props) => (
+            <List.Icon iconSize={32} {...props} icon="star-outline" />
+          )}
           title={({ ellipsizeMode, color: titleColor, fontSize }) => (
             <View style={[styles.container, styles.row, styles.customTitle]}>
               <Text

example/src/Examples/SegmentedButtonsExample.tsx

@@ -28,15 +28,19 @@ const SegmentedButtonExample = ({ navigation }: Props) => {
           title="Single select"
           description="Go to the example"
           onPress={() => navigation.navigate('segmentedButtonRealCase')}
-          right={(props) => <List.Icon {...props} icon="arrow-right" />}
+          right={(props) => (
+            <List.Icon iconSize={32} {...props} icon="arrow-right" />
+          )}
         />
         <List.Item
           title="Multiselect select"
           description="Go to the example"
           onPress={() =>
             navigation.navigate('segmentedButtonMultiselectRealCase')
           }
-          right={(props) => <List.Icon {...props} icon="arrow-right" />}
+          right={(props) => (
+            <List.Icon iconSize={32} {...props} icon="arrow-right" />
+          )}
         />
       </List.Section>
       <SegmentedButtonDefault />

example/src/Examples/ThemeExample.tsx

@@ -24,7 +24,9 @@ const ThemeExample = ({ navigation }: Props) => {
             title="Themed Sport App"
             description="Go to the example"
             onPress={() => navigation.navigate('teamsList')}
-            right={(props) => <List.Icon {...props} icon="arrow-right" />}
+            right={(props) => (
+              <List.Icon iconSize={32} {...props} icon="arrow-right" />
+            )}
           />
         </List.Section>
       </ScreenWrapper>

src/components/List/ListIcon.tsx

@@ -19,6 +19,10 @@ export type Props = {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * Size of the icon.
+   */
+  iconSize?: number;
 };
 
 const ICON_SIZE = 24;
@@ -34,19 +38,21 @@ 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} icon="calendar" />
+ *     <List.Icon color={MD3Colors.tertiary70} icon="equal" iconSize={32} />  // 👈 NEW EXAMPLE
+ *     <List.Icon color={MD3Colors.tertiary70} icon="calendar" iconSize={18} />
  *   </>
  * );
- *
- * export default MyComponent;
  * ```
+ *
+ * @property iconSize Size of the icon.
  */
+
 const ListIcon = ({
   icon,
   color: iconColor,
   style,
   theme: themeOverrides,
+  iconSize,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
 
@@ -55,7 +61,12 @@ const ListIcon = ({
       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 || ICON_SIZE}
+        color={iconColor}
+        theme={theme}
+      />
     </View>
   );
 };