Can't remove extra space around icons from react-native-vector-icons / @expo/vector-icons

Question

I am developing a React Native Expo app and using icons from @expo/vector-icons. When I apply a background color to test an icon, there seems to be unwanted space around the icon, preventing it from touching the background's edge.

Here's a simplified version of the code:

import { View, StyleSheet } from 'react-native';
import { AntDesign } from "@expo/vector-icons";

export default function App() {
  return (
    <View style={styles.container}>
      <AntDesign name="close" style={styles.iconClose} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  iconClose: {
    fontSize: 120,
    backgroundColor: "lightgreen",
  },
});

Here's a screenshot illustrating the issue:

I've tried placing the icon inside View component with height and width that are less than the icon size to make the space invisible, but it dosn't work:

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.iconCloseContainer}>
        <AntDesign name="close" style={styles.iconClose} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  iconCloseContainer: {
    width: 80,
    height: 80,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "red",
  },
  iconClose: {
    fontSize: 120,
    lineHeight: 80,
    alignSelf: "center",
    backgroundColor: "lightgreen",
  },
});

Any help or insights would be greatly appreciated. Thank you!