icons

src/components/modals/recipes/ModalAddIngredients.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import styled from "styled-components"
-import { CgFile } from "react-icons/cg"
-import { GiMeal } from "react-icons/gi"
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import { useDispatch, useSelector } from 'react-redux'
 import { findRecipeById } from '../../../redux/slices/recipesSlice'
@@ -13,16 +12,11 @@ import {
 import Ingredient from '../../recipes/Ingredient&Button'
 import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice'
 import Dropdown from '../../Dropdown'
+import theme from '../../../styles/theme';
 
-const IconList = styled(CgFile)`
-    font-size: 16px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-`
-const IconMeal = styled(GiMeal)`
-    font-size: 16px;
-    color: ${({ theme }) => theme.colors.primaryVar};
-`
+const IconList = () => <MaterialCommunityIcons name="format-list-bulleted" color={theme.colors.primaryVar} size={16} />
 
+const IconMeal = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={16} />
 
 const ModalAddIngredients = (props) => {
     const dispatch = useDispatch()