title: Vector icons for android and ios
body: <p>In <a href="https://www.npmjs.com/package/react-native-ionicons" rel="nofollow noreferrer">https://www.npmjs.com/package/react-native-ionicons</a>, we're given two ways to load icons for ios and android. I tried both approaches with v9.0.0 of @expo/vector-icons.</p>
  
  <p>I import Ionicons with this statement:</p>
  
  <pre><code>import { Ionicons } from '@expo/vector-icons';
  </code></pre>
  
  <ol>
  <li>Remove ios/md from the name</li>
  </ol>
  
  <pre><code>&lt;Ionicons name="close-circle" size={25} style={{color: 'white'}} /&gt;
  </code></pre>
  
  <p>I get the below error which also happens for other icon names:</p>
  
  <blockquote>
    <p>Warning: Failed prop type: Invalid prop name of value close-circle
    supplied to Icon, expected one of ...</p>
  </blockquote>
  
  <ol start="2">
  <li>If I pass ios/android properties instead, the icon just does not show up and I get no warning eg:</li>
  </ol>
  
  <pre><code>&lt;Ionicons ios="ios-close-circle" android="md-close-circle" size={25} style={{color: 'white'}} /&gt;
  </code></pre>
  
  <p>My current fix is based on <a href="https://stackoverflow.com/questions/52122061/how-can-i-create-cross-platform-icon-in-react-native">How can I create cross platform icon in react native?</a>. I use:</p>
  
  <pre><code>&lt;Ionicons name={${Platform.OS === "ios" ? "ios" : "md"}-close-circle} size={25} style={{color: 'white'}} /&gt;
  </code></pre>
  
  <p>Is there a simpler way?</p>
  
  <p>Thank you!</p>