Repository: kiwicom/mobile
Pull request #1439 (2019-01-16 20:15:11)

Navigation: Replace TextIcon with Icon


Patch:
diff --git a/app/MMB/src/components/header/Header.js b/app/MMB/src/components/header/Header.js
index 529d2c1f..78502bcc 100644
--- a/app/MMB/src/components/header/Header.js
+++ b/app/MMB/src/components/header/Header.js
@@ -5,7 +5,7 @@ import { View } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import {
   AdaptableLayout,
-  TextIcon,
+  Icon,
   StyleSheet,
   TouchableWithoutFeedback,
 } from '@kiwicom/mobile-shared';
@@ -84,7 +84,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
               onPress={this.handleOpenTripOverviewSubmenu}
               title={<Translation id="mmb.flight_overview.title" />}
               isActive={this.props.activeId === 'mmb.main_menu.trip_overview'}
-              icon={<TextIcon code="f" />}
+              icon={<Icon name="calendar" />}
             />
           </React.Fragment>
         }
diff --git a/app/MMB/src/menuGroups/ManageMenuGroup.js b/app/MMB/src/menuGroups/ManageMenuGroup.js
index 4b56fb31..ea0f4a4d 100644
--- a/app/MMB/src/menuGroups/ManageMenuGroup.js
+++ b/app/MMB/src/menuGroups/ManageMenuGroup.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { MenuItem, TitledMenuGroup } from '@kiwicom/mobile-navigation';
 
@@ -25,7 +25,7 @@ export default class ManageMenuGroup extends React.Component<Props> {
         <MenuItem
           onPress={this.handleOpenHelpSubmenu}
           isActive={this.props.activeId === 'mmb.main_menu.manage.help'}
-          icon={<TextIcon code="F" />}
+          icon={<Icon name="question-circle" />}
           title={<Translation id="mmb.main_menu.manage.help" />}
           description={
             <Translation id="mmb.main_menu.manage.help.description" />
@@ -35,7 +35,7 @@ export default class ManageMenuGroup extends React.Component<Props> {
         <MenuItem
           onPress={this.handleOpenOtherSubmenu}
           isActive={this.props.activeId === 'mmb.main_menu.manage.other'}
-          icon={<TextIcon code="&#xe07d;" />}
+          icon={<Icon name="menu-meatballs" />}
           title={<Translation id="mmb.main_menu.manage.other" />}
           description={
             <Translation id="mmb.main_menu.manage.other.description" />
diff --git a/app/MMB/src/menuGroups/TripInfoMenuGroup.js b/app/MMB/src/menuGroups/TripInfoMenuGroup.js
index efad3ccd..664e7a73 100644
--- a/app/MMB/src/menuGroups/TripInfoMenuGroup.js
+++ b/app/MMB/src/menuGroups/TripInfoMenuGroup.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { MenuItem, TitledMenuGroup } from '@kiwicom/mobile-navigation';
 
@@ -26,14 +26,14 @@ export default class TripInfoMenuGroup extends React.Component<Props> {
           onPress={this.handleOpenTicketsSubmenu}
           title={<Translation id="mmb.button.tickets" />}
           isActive={this.props.activeId === 'mmb.main_menu.trip_info.tickets'}
-          icon={<TextIcon code="." />}
+          icon={<Icon name="ticket" />}
           description={<Translation id="mmb.tickets.boarding_passes" />}
         />
         <MenuItem
           onPress={this.handleOpenTimelineSubmenu}
           title={<Translation id="mmb.timeline.title" />}
           isActive={this.props.activeId === 'mmb.main_menu.trip_info.timeline'}
-          icon={<TextIcon code="e" />}
+          icon={<Icon name="clock" />}
           description={<Translation id="mmb.subtitle.trip_schedule" />}
         />
       </TitledMenuGroup>
diff --git a/app/MMB/src/menuGroups/passengerMenuGroup/PassengerMenuGroup.js b/app/MMB/src/menuGroups/passengerMenuGroup/PassengerMenuGroup.js
index a8e2d1af..5b771f1e 100644
--- a/app/MMB/src/menuGroups/passengerMenuGroup/PassengerMenuGroup.js
+++ b/app/MMB/src/menuGroups/passengerMenuGroup/PassengerMenuGroup.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { MenuItem, TitledMenuGroup } from '@kiwicom/mobile-navigation';
@@ -34,7 +34,7 @@ class PassengerMenuGroup extends React.Component<Props> {
               this.props.activeId ===
               'mmb.main_menu.passengers.passenger_details'
             }
-            icon={<TextIcon code="w" />}
+            icon={<Icon name="passenger" />}
           />
         </TitledMenuGroup>
         <PassengerMenuDetail data={this.props.data} />
diff --git a/app/MMB/src/menuGroups/servicesMenuGroup/FlightServicesMenuItem.js b/app/MMB/src/menuGroups/servicesMenuGroup/FlightServicesMenuItem.js
index d39da173..9bcf679a 100644
--- a/app/MMB/src/menuGroups/servicesMenuGroup/FlightServicesMenuItem.js
+++ b/app/MMB/src/menuGroups/servicesMenuGroup/FlightServicesMenuItem.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { MenuItem } from '@kiwicom/mobile-navigation';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 
 import type { FlightServicesMenuItem as BookingType } from './__generated__/FlightServicesMenuItem.graphql';
@@ -26,7 +26,7 @@ export const FlightServicesMenuItem = (props: Props) => {
     <MenuItem
       onPress={props.onPress}
       isActive={props.isActive}
-      icon={<TextIcon code="&#xe049;" />}
+      icon={<Icon name="flight-services" />}
       title={<Translation id="mmb.main_menu.services.flight_services" />}
       description={
         <Translation id="mmb.main_menu.services.flight_services.description" />
diff --git a/app/MMB/src/menuGroups/servicesMenuGroup/ServicesMenuGroup.js b/app/MMB/src/menuGroups/servicesMenuGroup/ServicesMenuGroup.js
index 9cb26d15..693ade20 100644
--- a/app/MMB/src/menuGroups/servicesMenuGroup/ServicesMenuGroup.js
+++ b/app/MMB/src/menuGroups/servicesMenuGroup/ServicesMenuGroup.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { MenuItem, TitledMenuGroup } from '@kiwicom/mobile-navigation';
 
@@ -44,7 +44,7 @@ export class ServicesMenuGroup extends React.Component<PropsWithContext> {
           isActive={
             this.props.activeId === 'mmb.main_menu.services.trip_services'
           }
-          icon={<TextIcon code="r" />}
+          icon={<Icon name="insurance-confirmed" />}
           title={<Translation id="mmb.main_menu.services.trip_services" />}
           description={
             <Translation id="mmb.main_menu.services.trip_services.description" />
diff --git a/app/MMB/src/scenes/flightServices/FlightServiceMenuItem.js b/app/MMB/src/scenes/flightServices/FlightServiceMenuItem.js
index 5ea6d808..e1b06436 100644
--- a/app/MMB/src/scenes/flightServices/FlightServiceMenuItem.js
+++ b/app/MMB/src/scenes/flightServices/FlightServiceMenuItem.js
@@ -2,14 +2,14 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { type RouteNamesType, MenuItem } from '@kiwicom/mobile-navigation';
 
 type Props = {|
   +title: React.Element<typeof Translation>,
   +navigate: (routeName: RouteNamesType) => void,
   +routeName: RouteNamesType,
-  +icon: React.Element<typeof TextIcon>,
+  +icon: React.Element<typeof Icon>,
 |};
 
 export default class FlightServiceMenuItem extends React.Component<Props> {
diff --git a/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js b/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js
index dac96a9e..44190ef9 100644
--- a/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js
+++ b/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { TextIcon, RefreshableScrollView } from '@kiwicom/mobile-shared';
+import { Icon, RefreshableScrollView } from '@kiwicom/mobile-shared';
 import {
   type RouteNamesType,
   type NavigationType,
@@ -22,7 +22,7 @@ type OfferedFlightServicesType = {|
   key: string,
   title: React.Element<typeof Translation>,
   routeName: RouteNamesType,
-  icon: React.Element<typeof TextIcon>,
+  icon: React.Element<typeof Icon>,
 |};
 
 const offeredFlightServices: OfferedFlightServicesType[] = [
@@ -30,37 +30,37 @@ const offeredFlightServices: OfferedFlightServicesType[] = [
     key: 'BAGS',
     title: <Translation id="mmb.flight_services.additional_baggage" />,
     routeName: 'mmb.flight_services.checked_baggage',
-    icon: <TextIcon code="h" />,
+    icon: <Icon name="baggage-checked" />,
   },
   {
     key: 'ALLOCATED_SEATING',
     title: <Translation id="mmb.flight_services.allocated_seating" />,
     routeName: 'mmb.flight_services.allocated_seating',
-    icon: <TextIcon code="&#xe02a;" />,
+    icon: <Icon name="seat" />,
   },
   {
     key: 'SPORTS_EQUIPMENT',
     title: <Translation id="mmb.flight_services.sports_equipment" />,
     routeName: 'mmb.flight_services.sports_equipment',
-    icon: <TextIcon code="&#xe089;" />,
+    icon: <Icon name="gym" />,
   },
   {
     key: 'MUSICAL_EQUIPMENT',
     title: <Translation id="mmb.flight_services.musical_equipment" />,
     routeName: 'mmb.flight_services.musical_equipment',
-    icon: <TextIcon code="&#xe086;" />,
+    icon: <Icon name="musical-instruments" />,
   },
   {
     key: 'SPECIAL_ASSISTANCE',
     title: <Translation id="mmb.flight_services.special_assistance" />,
     routeName: 'mmb.flight_services.special_assistance',
-    icon: <TextIcon code="&#xe088;" />,
+    icon: <Icon name="wheelchair" />,
   },
   {
     key: 'TRAVELLING_WITH_PETS',
     title: <Translation id="mmb.flight_services.traveling_with_pets" />,
     routeName: 'mmb.flight_services.pets',
-    icon: <TextIcon code="&#xe043;" />,
+    icon: <Icon name="pet" />,
   },
 ];
 
diff --git a/app/MMB/src/scenes/help/Help.js b/app/MMB/src/scenes/help/Help.js
index 9d0ef281..7cd8ff9c 100644
--- a/app/MMB/src/scenes/help/Help.js
+++ b/app/MMB/src/scenes/help/Help.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import { ScrollView, Platform, Linking } from 'react-native';
-import { TextIcon, StyleSheet } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation, Alert } from '@kiwicom/mobile-localization';
 import {
   MenuItem,
@@ -76,7 +76,9 @@ class Help extends React.Component<Props> {
             <MenuItem
               title={<Translation id="mmb.sub_menu.help.call_support" />}
               onPress={this.handleOpenCallSupport}
-              actionIcon={<TextIcon code="&#xe058;" style={styles.icon} />}
+              actionIcon={
+                <Icon name="phone" color={defaultTokens.paletteProductNormal} />
+              }
               description={<Translation passThrough={`+${number}`} />}
             />
           )}
@@ -86,13 +88,6 @@ class Help extends React.Component<Props> {
   }
 }
 
-const styles = StyleSheet.create({
-  icon: {
-    color: defaultTokens.paletteProductNormal,
-    fontSize: 22,
-  },
-});
-
 export default createFragmentContainer(
   withNavigation(Help),
   graphql`
diff --git a/app/MMB/src/scenes/tickets/TicketDeleteButton.js b/app/MMB/src/scenes/tickets/TicketDeleteButton.js
index 1069f7a6..fe4e31d7 100644
--- a/app/MMB/src/scenes/tickets/TicketDeleteButton.js
+++ b/app/MMB/src/scenes/tickets/TicketDeleteButton.js
@@ -1,7 +1,7 @@
 // @flow strict
 
 import * as React from 'react';
-import { TextIcon, StyleSheet } from '@kiwicom/mobile-shared';
+import { Icon, StyleSheet } from '@kiwicom/mobile-shared';
 import { HeaderButton } from '@kiwicom/mobile-navigation';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 import RNFetchBlob from 'rn-fetch-blob';
@@ -110,7 +110,12 @@ export class TicketDeleteButton extends React.Component<
     }
     return (
       <HeaderButton.Right onPress={this.onPress}>
-        <TextIcon code="W" style={styles.icon} />
+        <Icon
+          name="remove"
+          color={defaultTokens.paletteProductNormal}
+          style={styles.icon}
+          size="small"
+        />
       </HeaderButton.Right>
     );
   }
@@ -133,8 +138,6 @@ export default withNavigationFocus(TicketDeleteButtonWithContext);
 
 const styles = StyleSheet.create({
   icon: {
-    fontSize: 21,
-    color: defaultTokens.paletteProductNormal,
     alignSelf: 'flex-start',
   },
 });
diff --git a/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js b/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js
index 9b135c2a..8bc7da27 100644
--- a/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { MenuItem } from '@kiwicom/mobile-navigation';
 import querystring from 'querystring';
@@ -107,7 +107,7 @@ export class CarRentalMenuItem extends React.Component<Props, State> {
             <Translation id="mmb.trip_services.local_services.car_rental" />
           }
           onPress={this.openPopup}
-          icon={<TextIcon code="&#xe03a;" />}
+          icon={<Icon name="car" />}
         />
       </React.Fragment>
     );
diff --git a/app/MMB/src/scenes/tripServices/LoungeMenuItem.js b/app/MMB/src/scenes/tripServices/LoungeMenuItem.js
index 466b0c2e..e90aa1a6 100644
--- a/app/MMB/src/scenes/tripServices/LoungeMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/LoungeMenuItem.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { MenuItem } from '@kiwicom/mobile-navigation';
 import querystring from 'querystring';
@@ -105,7 +105,7 @@ class LoungeMenuItem extends React.Component<Props, State> {
         <MenuItem
           title={<Translation id="mmb.trip_services.local_services.lounge" />}
           onPress={this.openPopup}
-          icon={<TextIcon code="&#xe04e;" />}
+          icon={<Icon name="lounge" />}
         />
       </React.Fragment>
     );
diff --git a/app/MMB/src/scenes/tripServices/ParkingMenuItem.js b/app/MMB/src/scenes/tripServices/ParkingMenuItem.js
index 945a1866..6d79f394 100644
--- a/app/MMB/src/scenes/tripServices/ParkingMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/ParkingMenuItem.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation, DeviceInfo } from '@kiwicom/mobile-localization';
 import { MenuItem } from '@kiwicom/mobile-navigation';
 import querystring from 'querystring';
@@ -45,7 +45,7 @@ class ParkingMenuItem extends React.Component<Props> {
       <MenuItem
         title={<Translation id="mmb.trip_services.local_services.parking" />}
         onPress={this.openLink}
-        icon={<TextIcon code="&#xe03e;" />}
+        icon={<Icon name="parking" />}
       />
     );
   }
diff --git a/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js b/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js
index ea39bf60..e04d573b 100644
--- a/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js
@@ -8,11 +8,7 @@ import {
   DateUtils,
   DateFormatter,
 } from '@kiwicom/mobile-localization';
-import {
-  TextIcon,
-  Dimensions,
-  type DimensionType,
-} from '@kiwicom/mobile-shared';
+import { Icon, Dimensions, type DimensionType } from '@kiwicom/mobile-shared';
 import {
   MenuItem,
   withNavigation,
@@ -150,7 +146,7 @@ export class HotelMenuItem extends React.Component<PropsWithContext, State> {
         <MenuItem
           title={<Translation id="mmb.trip_services.local_services.hotel" />}
           onPress={this.menuItemOnPress}
-          icon={<TextIcon code="&#xe085;" />}
+          icon={<Icon name="accommodation" />}
         />
       </React.Fragment>
     );
diff --git a/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js b/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js
index 4223c29a..59e06947 100644
--- a/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js
@@ -1,7 +1,7 @@
 // @flow strict
 
 import * as React from 'react';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation, DateUtils, Alert } from '@kiwicom/mobile-localization';
 import { MenuItem } from '@kiwicom/mobile-navigation';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
@@ -38,7 +38,7 @@ export class InsuranceMenuItem extends React.Component<Props> {
         title={
           <Translation id="mmb.trip_services.general_services.insurance" />
         }
-        icon={<TextIcon code="'" />}
+        icon={<Icon name="insurance" />}
         onPress={this.onPress}
       />
     );
diff --git a/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js b/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js
index c7c9adb5..f0a66a09 100644
--- a/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import {
   MenuItem,
@@ -128,7 +128,7 @@ class TransportationMenuItem extends React.Component<Props, State> {
             <Translation id="mmb.trip_services.local_services.transportation" />
           }
           onPress={this.openPopup}
-          icon={<TextIcon code=";" />}
+          icon={<Icon name="taxi" />}
         />
       </React.Fragment>
     );
diff --git a/packages/navigation/src/HeaderButton.js b/packages/navigation/src/HeaderButton.js
index 2838dcdf..0e3bb410 100644
--- a/packages/navigation/src/HeaderButton.js
+++ b/packages/navigation/src/HeaderButton.js
@@ -6,7 +6,6 @@ import {
   Touchable,
   StyleSheet,
   Text,
-  TextIcon,
   Icon,
   type StylePropType,
 } from '@kiwicom/mobile-shared';
@@ -21,7 +20,6 @@ type Props = {|
   +onLongPress?: (React.ElementRef<typeof Touchable>) => void,
   +children:
     | React.Element<typeof HeaderButton.Text>
-    | React.Element<typeof TextIcon>
     | React.Element<typeof Icon>,
   +left?: boolean,
   +style?: StylePropType,
@@ -68,7 +66,7 @@ export default class HeaderButton extends React.PureComponent<Props, State> {
   static CloseModal = ({ onPress, text }: CloseModalProps) => (
     <HeaderButton.Left onPress={onPress}>
       {Platform.OS === 'android' ? (
-        <TextIcon code="X" style={styles.closeIcon} />
+        <Icon name="close" color={defaultTokens.paletteProductNormal} />
       ) : (
         <HeaderButton.Text>
           {text || <Translation id="shared.button.close" />}
@@ -162,10 +160,6 @@ const styles = StyleSheet.create({
   disabledButton: {
     color: defaultTokens.paletteCloudNormal,
   },
-  closeIcon: {
-    fontSize: 24,
-    color: defaultTokens.paletteProductNormal,
-  },
 });
 
 HeaderButton.Left.displayName = 'HeaderButton.Left';
diff --git a/packages/navigation/src/MenuItem.js b/packages/navigation/src/MenuItem.js
index 4eac0968..f4b2f085 100644
--- a/packages/navigation/src/MenuItem.js
+++ b/packages/navigation/src/MenuItem.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View, Platform } from 'react-native';
 import {
-  TextIcon,
+  Icon,
   StyleSheet,
   Text,
   Touchable,
@@ -20,10 +20,10 @@ type Props = {|
   isActive: boolean,
 
   // icon on the left
-  icon?: React.Element<typeof TextIcon>,
+  icon?: React.Element<typeof Icon>,
 
   // icon on the right (arrow by default)
-  actionIcon?: React.Element<typeof TextIcon>,
+  actionIcon?: React.Element<typeof Icon>,
   description?: React.Element<typeof Translation>,
   testID?: string,
 |};
@@ -78,7 +78,10 @@ function MenuItem(props: Props) {
             renderOnNarrow={Platform.select({
               ios: (
                 <View style={styleSheet.rightArrow}>
-                  <TextIcon code="&#xe01F;" style={styles.icon} />
+                  <Icon
+                    name="chevron-right"
+                    color={defaultTokens.paletteProductNormal}
+                  />
                 </View>
               ),
               android: null,
@@ -93,14 +96,6 @@ function MenuItem(props: Props) {
 AdaptableMenuItem.defaultProps = {
   isActive: false,
 };
-
-const styles = StyleSheet.create({
-  icon: {
-    color: defaultTokens.paletteProductNormal,
-    fontSize: 26,
-  },
-});
-
 export default function AdaptableMenuItem(props: Props) {
   // Menu item can be activated but only on tablets (wide devices). Otherwise
   // it's not possible to activate it because new scene should always open
diff --git a/packages/navigation/src/MenuItemIcon.js b/packages/navigation/src/MenuItemIcon.js
index 4beb7eab..66466a07 100644
--- a/packages/navigation/src/MenuItemIcon.js
+++ b/packages/navigation/src/MenuItemIcon.js
@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
+import { StyleSheet, Icon } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 type Props = {|
   +invertColors: boolean,
-  +iconComponent: React.Element<typeof TextIcon>,
+  +iconComponent: React.Element<typeof Icon>,
 |};
 
 export default function MenuItemIcon(props: Props) {
@@ -32,9 +32,15 @@ const styleSheet = StyleSheet.create({
   icon: {
     android: {
       fontSize: 20,
+      height: 20,
+      width: 20,
+      lineHeight: 20,
     },
     ios: {
       fontSize: 19,
+      height: 19,
+      width: 19,
+      lineHeight: 19,
       color: defaultTokens.colorIconSecondary,
     },
   },


Test patch:
diff --git a/app/MMB/src/scenes/flightServices/__tests__/FlightServicesMenuGroup.test.js b/app/MMB/src/scenes/flightServices/__tests__/FlightServicesMenuGroup.test.js
index b9db960b..85ccd858 100644
--- a/app/MMB/src/scenes/flightServices/__tests__/FlightServicesMenuGroup.test.js
+++ b/app/MMB/src/scenes/flightServices/__tests__/FlightServicesMenuGroup.test.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 
 import { FlightServicesMenuGroup } from '../FlightServicesMenuGroup';
 
@@ -29,7 +29,7 @@ it('should split ordered services from not ordered services', () => {
         key: 'BAGS',
         title: <Translation id="mmb.flight_services.additional_baggage" />,
         routeName: 'mmb.flight_services.checked_baggage',
-        icon: <TextIcon code="h" />,
+        icon: <Icon name="baggage-checked" />,
       },
     ],
     rest: [
@@ -37,31 +37,31 @@ it('should split ordered services from not ordered services', () => {
         key: 'ALLOCATED_SEATING',
         title: <Translation id="mmb.flight_services.allocated_seating" />,
         routeName: 'mmb.flight_services.allocated_seating',
-        icon: <TextIcon code="&#xe02a;" />,
+        icon: <Icon name="seat" />,
       },
       {
         key: 'SPORTS_EQUIPMENT',
         title: <Translation id="mmb.flight_services.sports_equipment" />,
         routeName: 'mmb.flight_services.sports_equipment',
-        icon: <TextIcon code="&#xe089;" />,
+        icon: <Icon name="gym" />,
       },
       {
         key: 'MUSICAL_EQUIPMENT',
         title: <Translation id="mmb.flight_services.musical_equipment" />,
         routeName: 'mmb.flight_services.musical_equipment',
-        icon: <TextIcon code="&#xe086;" />,
+        icon: <Icon name="musical-instruments" />,
       },
       {
         key: 'SPECIAL_ASSISTANCE',
         title: <Translation id="mmb.flight_services.special_assistance" />,
         routeName: 'mmb.flight_services.special_assistance',
-        icon: <TextIcon code="&#xe088;" />,
+        icon: <Icon name="wheelchair" />,
       },
       {
         key: 'TRAVELLING_WITH_PETS',
         title: <Translation id="mmb.flight_services.traveling_with_pets" />,
         routeName: 'mmb.flight_services.pets',
-        icon: <TextIcon code="&#xe043;" />,
+        icon: <Icon name="pet" />,
       },
     ],
   });
diff --git a/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap b/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap
index d3cd8ffc..883b2b9d 100644
--- a/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap
+++ b/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap
@@ -48,32 +48,24 @@ exports[`TicketDeleteButton renders correctly when booking has local files 1`] =
         style={
           Array [
             Object {
-              "color": "#171b1e",
-              "fontFamily": "CircularPro-Book",
-              "fontSize": 14,
-              "fontWeight": "normal",
-              "letterSpacing": -0.15,
+              "fontFamily": "orbit-icons",
+            },
+            Object {
+              "fontSize": 16,
+              "height": 16,
+              "lineHeight": 16,
+              "width": 16,
+            },
+            Object {
+              "color": "#00a991",
+            },
+            Object {
+              "alignSelf": "flex-start",
             },
-            Array [
-              Object {
-                "color": "#7f91a8",
-                "fontFamily": "orbit-icons",
-                "fontSize": 20,
-                "includeFontPadding": false,
-                "textAlignVertical": "center",
-              },
-              Object {
-                "alignSelf": "flex-start",
-                "color": "#00a991",
-                "fontSize": 21,
-              },
-            ],
           ]
         }
       >
-        <Text>
-          W
-        </Text>
+        W
       </Text>
     </View>
   </View>