How to use react-native-vector-icons with react-native-paper on iOS?

Question

I'm developing a react native app for iOS, and using react-native-paper and react-native-vector-icons. I followed all the steps for installation and configuration on both the React Native Paper docs and the vector icons docs. I am trying to use the [Material Icons font from Google Fonts][1], but no matter what I put in the icon="" property, I get a question mark. Sometimes it's a plain question mark and sometimes it's a ? inside a box.

[![icon issue][2]][2]

My code for this screen:

import {Button, TextInput} from 'react-native-paper';
import {useRecoilState} from 'recoil';
import {passwordState, usernameState} from '../recoil/store';

export const LoginScreen = () => {
  const [username, setUsername] = useRecoilState(usernameState);
  const [password, setPassword] = useRecoilState(passwordState);
  return (
    <View>
      <TextInput
        mode="outlined"
        label="Username"
        value={username}
        onChangeText={text => setUsername(text)}
      />
      <TextInput
        mode="outlined"
        label="Password"
        value={password}
        onChangeText={text => setPassword(text)}
      />
      <Button mode="elevated" icon="login">
        Login
      </Button>
    </View>
  );
};

My package.json:

  "name": "CoWallet",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-firebase/app": "^18.1.0",
    "@react-native-firebase/firestore": "^18.1.0",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "react": "18.2.0",
    "react-native": "0.72.1",
    "react-native-paper": "^5.9.0",
    "react-native-safe-area-context": "^4.6.3",
    "react-native-screens": "^3.22.0",
    "react-native-vector-icons": "^9.2.0",
    "recoil": "^0.7.7"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.7",
    "@tsconfig/react-native": "^3.0.0",
    "@types/metro-config": "^0.76.3",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.5",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

My info.plist (from Xcode): 
[![info.plist][3]][3]


  [1]: https://fonts.google.com/icons?selected=Material%20Icons%20Outlined:login:&icon.platform=ios&icon.set=Material%20Icons
  [2]: https://i.stack.imgur.com/7Vhel.png
  [3]: https://i.stack.imgur.com/2MnkD.png