Use 1 Icon Set

App.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 
-import {Ionicons, MaterialCommunityIcons} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import {SelectProvider} from '@mobile-reality/react-native-select-pro';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {getStateFromPath, NavigationContainer, PathConfigMap, RouteProp, useNavigationContainerRef} from '@react-navigation/native';
@@ -378,13 +378,13 @@ const BaseApp: React.FunctionComponent<{
       headerShown: false,
       tabBarIcon: ({color, size}: {focused: boolean; color: string; size: number}) => {
         if (name === 'Home') {
-          return <MaterialCommunityIcons name="map-outline" size={size} color={color} />;
+          return <Ionicons name="map-outline" size={size} color={color} />;
         } else if (name === 'Observations') {
-          return <MaterialCommunityIcons name="text-box-plus-outline" size={size} color={color} />;
+          return <Ionicons name="reader-outline" size={size} color={color} />;
         } else if (name === 'Weather Data') {
           return <Ionicons name="stats-chart-outline" size={size} color={color} />;
         } else if (name === 'Menu') {
-          return <MaterialCommunityIcons name="dots-horizontal" size={size} color={color} />;
+          return <Ionicons name="ellipsis-horizontal" size={size} color={color} />;
         }
       },
       // these two properties should really take ColorValue but oh well

components/DangerScale.tsx

@@ -34,7 +34,7 @@ export const DangerScale: React.FunctionComponent<DangerScaleProps> = props => {
           ))}
         </HStack>
         <View>
-          <InfoTooltip color="white" size={16} title="Danger Scale" style={{padding: 0}} hitSlop={{top: 8, left: 8, bottom: 8, right: 8}} content={helpStrings.dangerScaleDetail} />
+          <InfoTooltip color="white" size={20} title="Danger Scale" style={{padding: 0}} hitSlop={{top: 8, left: 8, bottom: 8, right: 8}} content={helpStrings.dangerScaleDetail} />
         </View>
       </HStack>
     </View>

components/FeatureFlagsDebugger.tsx

@@ -1,4 +1,4 @@
-import {AntDesign} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import {NativeStackScreenProps} from '@react-navigation/native-stack';
 import {FeatureFlagKey, FeatureFlagValue, useDebugFeatureFlags, useOneFeatureFlag} from 'FeatureFlags';
 import {Card} from 'components/content/Card';
@@ -99,14 +99,14 @@ const FeatureFlagCard: React.FunctionComponent<{flag: FeatureFlagKey}> = ({flag}
 
 const FeatureFlagIcon: React.FunctionComponent<{value: FeatureFlagValue | undefined}> = ({value}) => {
   if (value === undefined) {
-    return <AntDesign name="questioncircleo" size={16} color={colorLookup('general_information')} />;
+    return <Ionicons name="help-circle-outline" size={16} color={colorLookup('general_information')} />;
   }
   if (typeof value === 'boolean') {
     if (value) {
-      return <AntDesign name="checkcircle" size={16} color={colorLookup('success')} />;
+      return <Ionicons name="checkmark-circle-outline" size={16} color={colorLookup('success')} />;
     } else {
-      return <AntDesign name="closecircle" size={16} color={colorLookup('error')} />;
+      return <Ionicons name="close-circle-outline" size={16} color={colorLookup('error')} />;
     }
   }
-  return <AntDesign name="infocirlceo" size={16} color={colorLookup('primary')} />;
+  return <Ionicons name="information-circle-outline" size={16} color={colorLookup('primary')} />;
 };

components/content/ActionList.tsx

@@ -1,4 +1,4 @@
-import {Entypo} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import {HStack, View, ViewProps, VStack} from 'components/core';
 import {Body} from 'components/text';
 import {logger} from 'logger';
@@ -40,7 +40,7 @@ function ActionListInternal<T>({actions, header, ...props}: ActionListProps<T>)
         <TouchableOpacity onPress={onPressHandlers[index]} key={label}>
           <HStack borderBottomWidth={index < actions.length - 1 ? 1 : 0} borderColor={colorLookup('light.300')} py={10} pr={8} justifyContent="space-between">
             <Body style={{flex: 1, flexGrow: 1}}>{label}</Body>
-            <Entypo name={'chevron-small-right'} color={colorLookup('light.300')} size={24} />
+            <Ionicons name={'chevron-forward'} color={colorLookup('light.300')} size={16} />
           </HStack>
         </TouchableOpacity>
       ))}

components/content/Button.tsx

@@ -106,7 +106,7 @@ const StyledButton: React.FC<StyledButtonProps> = ({buttonStyle, children, rende
     <Pressable disabled={disabled} onPressIn={onPressIn} onPressOut={onPressOut} onPress={onPress}>
       <View borderColor={borderColor} borderWidth={2} borderRadius={8} py={12} px={16} {...props} backgroundColor={backgroundColor}>
         <Center>
-          <View style={{position: 'relative'}}>
+          <View>
             {renderChildren ? renderChildren({backgroundColor, textColor}) : <Text style={{color: textColor}}>{children}</Text>}
             {busy && <ActivityIndicator size={bodySize} color={textColor} style={{position: 'absolute', right: -1.5 * bodySize, top: 0.25 * bodySize}} />}
           </View>

components/content/Card.tsx

@@ -3,7 +3,7 @@ import React, {PropsWithChildren, ReactNode, useCallback, useEffect, useState} f
 import {ColorValue, TouchableOpacity, ViewStyle} from 'react-native';
 import Collapsible from 'react-native-collapsible';
 
-import {AntDesign, FontAwesome} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 
 import {Divider, HStack, View, ViewProps, VStack} from 'components/core';
 import {usePostHog} from 'posthog-react-native';
@@ -95,9 +95,9 @@ export const EditDeleteCard: React.FunctionComponent<PropsWithChildren<EditDelet
             <>{header}</>
             <HStack space={4}>
               {onEditPress && (
-                <AntDesign.Button
+                <Ionicons.Button
                   size={16}
-                  name="edit"
+                  name="pencil-outline"
                   color="rgba(0, 0, 0, 0.8)"
                   backgroundColor="white"
                   iconStyle={{marginRight: 0}}
@@ -106,9 +106,9 @@ export const EditDeleteCard: React.FunctionComponent<PropsWithChildren<EditDelet
                 />
               )}
 
-              <AntDesign.Button
+              <Ionicons.Button
                 size={16}
-                name="delete"
+                name="trash-outline"
                 color="rgba(0, 0, 0, 0.8)"
                 backgroundColor="white"
                 iconStyle={{marginRight: 0}}
@@ -154,7 +154,7 @@ export const CollapsibleCard: React.FunctionComponent<PropsWithChildren<Collapsi
         <TouchableOpacity onPress={pressHandler}>
           <HStack justifyContent="space-between" alignItems="center">
             {header}
-            <FontAwesome name={isCollapsed ? 'angle-down' : 'angle-up'} color={textColor} backgroundColor="white" size={24} />
+            <Ionicons name={isCollapsed ? 'chevron-down' : 'chevron-up'} color={textColor} backgroundColor="white" size={24} />
           </HStack>
         </TouchableOpacity>
       }>

components/content/Dropdown.tsx

@@ -1,6 +1,6 @@
 import {View as RNView, TouchableOpacity} from 'react-native';
 
-import {Entypo} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import {HStack, View, ViewProps, VStack} from 'components/core';
 import {Body} from 'components/text';
 import {useToggle} from 'hooks/useToggle';
@@ -53,7 +53,7 @@ export const Dropdown: React.FC<DropdownProps> = ({items, selectedItem, onSelect
         <View ref={ref} borderColor={borderColor} borderWidth={2} borderRadius={4} p={8} flexDirection="column" justifyContent="center" {...props}>
           <HStack justifyContent="space-between" alignItems="center">
             <Body>{selectedItem}</Body>
-            <Entypo name={dropdownVisible ? 'chevron-small-up' : 'chevron-small-down'} size={32} style={{marginTop: -2.25}} color={colorLookup('text')} />
+            <Ionicons name={dropdownVisible ? 'chevron-up' : 'chevron-down'} size={20} style={{marginTop: -2.25}} color={colorLookup('text')} />
           </HStack>
         </View>
       </TouchableOpacity>

components/content/InfoTooltip.tsx

@@ -1,4 +1,4 @@
-import {AntDesign} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import {Button} from 'components/content/Button';
 import {Center, View, VStack} from 'components/core';
 import {BodyBlack, Title3Semibold} from 'components/text';
@@ -14,8 +14,8 @@ export interface InfoTooltipProps {
   content: string;
   size: number;
   color?: ColorValue;
-  solidIcon?: keyof typeof AntDesign.glyphMap;
-  outlineIcon?: keyof typeof AntDesign.glyphMap;
+  solidIcon?: keyof typeof Ionicons.glyphMap;
+  outlineIcon?: keyof typeof Ionicons.glyphMap;
 
   htmlStyle?: HTMLRendererConfigProps['baseStyle'];
   // Additional IconButton customization
@@ -29,8 +29,8 @@ export const InfoTooltip: React.FC<InfoTooltipProps> = ({
   title,
   content,
   color = 'text',
-  solidIcon = 'infocirlce', // unfortunate ant misspelling: infocirlce
-  outlineIcon = 'infocirlceo', // another unfortunate ant misspelling: infocirlceo
+  solidIcon = 'information-circle',
+  outlineIcon = 'information-circle-outline',
   size,
   htmlStyle = {},
   ...props
@@ -48,7 +48,7 @@ export const InfoTooltip: React.FC<InfoTooltipProps> = ({
   return (
     <>
       {/* unfortunate ant misspelling: infocirlceo */}
-      <AntDesign.Button name={outlineIcon} color={colorLookup(color)} backgroundColor="transparent" onPress={openModal} size={size} iconStyle={{marginRight: 0}} {...props} />
+      <Ionicons.Button name={outlineIcon} color={colorLookup(color)} backgroundColor="transparent" onPress={openModal} size={size} iconStyle={{marginRight: 0}} {...props} />
       {/* Pressing the Android back button dismisses the modal */}
       <Modal visible={showModal} transparent animationType="fade" onRequestClose={closeModal}>
         {/* Pressing anywhere outside the modal dismisses the modal */}
@@ -75,7 +75,7 @@ export const InfoTooltip: React.FC<InfoTooltipProps> = ({
 
                     elevation: 5,
                   }}>
-                  <AntDesign name={solidIcon} color={colorLookup('primary')} size={30} style={{alignSelf: 'center', marginBottom: 4}} />
+                  <Ionicons name={solidIcon} color={colorLookup('primary')} size={30} style={{alignSelf: 'center', marginBottom: 4}} />
                   <Title3Semibold textAlign="center">{title}</Title3Semibold>
                   <HTMLRendererConfig baseStyle={finalHtmlStyle}>
                     <HTML source={{html: content}} />

components/content/NavigationHeader.tsx

@@ -1,4 +1,4 @@
-import {AntDesign, Entypo} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import {getHeaderTitle} from '@react-navigation/elements';
 import {NativeStackHeaderProps} from '@react-navigation/native-stack';
 import {HStack, View} from 'components/core';
@@ -81,10 +81,10 @@ export const NavigationHeader: React.FunctionComponent<
     <View style={{width: '100%', backgroundColor: 'white', paddingTop: Math.max(8, insets.top)}}>
       <HStack justifyContent="space-between" pb={8} style={options.headerStyle} space={8} pl={3} pr={16}>
         {back ? (
-          <AntDesign.Button
+          <Ionicons.Button
             size={24}
             color={colorLookup('text')}
-            name="arrowleft"
+            name="arrow-back-outline"
             backgroundColor="white"
             iconStyle={{marginLeft: 0, marginRight: 0}}
             style={{textAlign: 'center', borderColor: 'transparent', borderWidth: 1}}
@@ -99,10 +99,10 @@ export const NavigationHeader: React.FunctionComponent<
           {title}
         </TextComponent>
         {shareUrl ? (
-          <Entypo.Button
+          <Ionicons.Button
             size={24}
             color={colorLookup('text')}
-            name={Platform.OS == 'ios' ? 'share-alternative' : 'share'}
+            name={Platform.OS == 'ios' ? 'share-outline' : 'share-social'}
             backgroundColor="white"
             iconStyle={{marginLeft: 0, marginRight: 0}}
             style={{textAlign: 'center', borderColor: 'transparent', borderWidth: 1}}

components/content/Toast.tsx

@@ -1,4 +1,4 @@
-import {AntDesign} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import {HStack, View, VStack} from 'components/core';
 import {Body} from 'components/text';
 import React, {ReactNode} from 'react';
@@ -20,7 +20,7 @@ export const BaseToast: React.FunctionComponent<{
           <View flex={1}>
             <Body>{content}</Body>
           </View>
-          {onPress && onPress.name !== 'noop' && <AntDesign name="close" size={18} color={colorLookup('muted.700')} />}
+          {onPress && onPress.name !== 'noop' && <Ionicons name="close-outline" size={24} color={colorLookup('muted.700')} />}
         </HStack>
       </HStack>
     </VStack>
@@ -33,21 +33,21 @@ export const BaseToast: React.FunctionComponent<{
 };
 
 export const SuccessToast: React.FunctionComponent<{content: string; onPress?: () => void}> = ({...props}) => {
-  return <BaseToast icon={<AntDesign name="checkcircle" size={18} color="#006D23" />} borderColor={'#9ED696'} {...props} />;
+  return <BaseToast icon={<Ionicons name="checkmark-circle-outline" size={24} color="#006D23" />} borderColor={'#9ED696'} {...props} />;
 };
 
 export const InfoToast: React.FunctionComponent<{content: string; onPress?: () => void}> = ({...props}) => {
-  return <BaseToast icon={<AntDesign name="infocirlce" size={18} color="#5A657C" />} borderColor={'#CFD9E0'} {...props} />;
+  return <BaseToast icon={<Ionicons name="information-circle-outline" size={24} color="#5A657C" />} borderColor={'#CFD9E0'} {...props} />;
 };
 
 export const ActionToast: React.FunctionComponent<{content: string; onPress?: () => void}> = ({...props}) => {
-  return <BaseToast icon={<AntDesign name="infocirlce" size={18} color="#0059C8" />} borderColor={'#98CBFF'} {...props} />;
+  return <BaseToast icon={<Ionicons name="information-circle-outline" size={24} color="#0059C8" />} borderColor={'#98CBFF'} {...props} />;
 };
 
 export const ErrorToast: React.FunctionComponent<{content: string; onPress?: () => void}> = ({...props}) => {
-  return <BaseToast icon={<AntDesign name="warning" size={18} color="#DB3832" />} borderColor={'#FF3141'} {...props} />;
+  return <BaseToast icon={<Ionicons name="warning-outline" size={24} color="#DB3832" />} borderColor={'#FF3141'} {...props} />;
 };
 
 export const WarningToast: React.FunctionComponent<{content: string; onPress?: () => void}> = ({...props}) => {
-  return <BaseToast icon={<AntDesign name="warning" size={18} color="#EA983F" />} borderColor={'#EA983F'} {...props} />;
+  return <BaseToast icon={<Ionicons name="warning-outline" size={24} color="#EA983F" />} borderColor={'#EA983F'} {...props} />;
 };

components/content/carousel/MediaViewerModal/MediaViewerModalHeader.tsx

@@ -1,4 +1,4 @@
-import {AntDesign} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import {Center, HStack, View, ViewProps} from 'components/core';
 import {BodySm} from 'components/text';
 import React from 'react';
@@ -15,7 +15,7 @@ interface MediaViewerModalHeaderProps {
 const RoundButton = ({onPress, ...props}: {onPress: ((event: GestureResponderEvent) => void) | undefined} & ViewProps) => (
   <TouchableOpacity onPress={onPress}>
     <Center height={32} width={32} backgroundColor={colorLookup('modal.background')} borderRadius={16} {...props}>
-      <AntDesign size={24} color="white" name="close" />
+      <Ionicons size={28} color="white" name="close-outline" />
     </Center>
   </TouchableOpacity>
 );

components/content/carousel/NetworkImage.tsx

@@ -4,7 +4,7 @@ import {merge} from 'lodash';
 
 import {ActivityIndicator, Image, ImageStyle, StyleProp, TouchableOpacity} from 'react-native';
 
-import {FontAwesome, FontAwesome5} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 
 import {Center, View, VStack} from 'components/core';
 import {Body} from 'components/text';
@@ -69,7 +69,7 @@ export const NetworkImage: React.FC<NetworkImageProps> = ({
           {image}
           {showVideoIndicator && (
             <View style={{zIndex: 1, position: 'absolute'}}>
-              <FontAwesome name="youtube-play" color={'red'} size={48} />
+              <Ionicons name="logo-youtube" color={'red'} size={48} />
             </View>
           )}
         </Center>
@@ -82,7 +82,7 @@ export const NetworkImage: React.FC<NetworkImageProps> = ({
       {status === 'loading' && <ActivityIndicator style={{height: Math.min(32, height / 2)}} />}
       {status === 'error' && (
         <VStack space={8} alignItems="center">
-          <FontAwesome5 name="exclamation-triangle" size={Math.min(32, height / 2)} color={COLORS['warning.700']} />
+          <Ionicons name="alert-circle" size={Math.min(32, height / 2)} color={COLORS['warning.700']} />
           <Body>Media failed to load.</Body>
         </VStack>
       )}

components/forecast/AvalancheTab.tsx

@@ -2,7 +2,7 @@ import React, {useCallback, useState} from 'react';
 
 import {addDays, formatDistanceToNow, isAfter} from 'date-fns';
 
-import {Feather, FontAwesome} from '@expo/vector-icons';
+import Ionicons from '@expo/vector-icons/Ionicons';
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import * as Sentry from '@sentry/react-native';
 import {AvalancheDangerIcon} from 'components/AvalancheDangerIcon';
@@ -15,7 +15,7 @@ import {InfoTooltip} from 'components/content/InfoTooltip';
 import {NotFound, QueryState, incompleteQueryState} from 'components/content/QueryState';
 import {MediaCarousel} from 'components/content/carousel/MediaCarousel';
 import {HStack, VStack, View} from 'components/core';
-import {AllCapsSm, AllCapsSmBlack, Body, BodyBlack, BodySemibold, BodySm, BodySmBlack, BodySmSemibold, Title3Black, bodySize} from 'components/text';
+import {AllCapsSm, AllCapsSmBlack, Body, BodyBlack, BodySemibold, BodySm, BodySmBlack, BodySmSemibold, Title3Black} from 'components/text';
 import {HTML} from 'components/text/HTML';
 import helpStrings from 'content/helpStrings';
 import {toDate} from 'date-fns-tz';
@@ -55,7 +55,7 @@ const HeaderWithTooltip: React.FunctionComponent<{
   // text - neither `center` nor `baseline` alignment look good on their own
   <HStack space={6} alignItems="center">
     <BodyBlack numberOfLines={1}>{title}</BodyBlack>
-    <InfoTooltip size={bodySize} title={title} content={content} style={{paddingBottom: 0, paddingTop: 1}} />
+    <InfoTooltip size={20} title={title} content={content} style={{paddingBottom: 0, paddingTop: 1}} />
   </HStack>
 );
 
@@ -263,7 +263,7 @@ const WarningCard: React.FunctionComponent<{warning: Warning | Watch | Special}>
         <VStack space={16} flex={1}>
           <VStack space={8}>
             <HStack space={8} alignItems={'flex-start'}>
-              <Feather name="alert-triangle" size={24} color={accentColor} />
+              <Ionicons name="alert-circle-outline" size={24} color={accentColor} />
               <Title3Black color="white">{title}</Title3Black>
             </HStack>
             <VStack>
@@ -307,7 +307,7 @@ const WarningCard: React.FunctionComponent<{warning: Warning | Watch | Special}>
         </VStack>
         <TouchableOpacity onPress={toggleCollapsed}>
           <HStack mr={12} justifyContent="space-between" alignItems="center">
-            <FontAwesome name={isCollapsed ? 'angle-down' : 'angle-up'} color={'white'} backgroundColor={colorLookup('modal.background')} size={24} />
+            <Ionicons name={isCollapsed ? 'chevron-down' : 'chevron-up'} color={'white'} backgroundColor={colorLookup('modal.background')} size={24} />
           </HStack>
         </TouchableOpacity>
       </HStack>