<p>ReactNative provide us third party library <span style="color: #008000;"><strong>react-native-vector-icons</strong></span> by using which we can use built_in icons for different platforms(android,windows,ios).</p>
<h3><span style="color: #000080;">Installation</span></h3>
<p>For installing <span style="color: #008000;"><strong>react-native-vector-icons</strong></span> in android:</p>
<p>Run: <span style="color: #000080;"><strong>npm install react-native-vector-icons &#8211;save</strong></span></p>
<h3></h3>
<h3><span style="color: #000080;">Android</span></h3>
<div class="highlight highlight-source-groovy-gradle">
<ul>
<li>Edit <span style="color: #008000;"><strong>android/settings.gradle</strong></span> to look like this (without the +):
<div class="highlight highlight-source-diff">
<pre>rootProject.name = 'MyApp'

include ':app'

<span class="pl-mi1"><span style="color: #0000ff;">+</span> <span style="color: #0000ff;">include ':react-native-vector-icons'</span></span><span class="pl-mi1" style="color: #0000ff;">
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')</span></pre>
</div>
</li>
<li>Edit <span style="color: #008000;"><strong>android/app/build.gradle</strong></span> (note: <span style="color: #008000;"><strong>app</strong></span> folder) to look like this:
<div class="highlight highlight-source-diff">
<pre>apply plugin: 'com.android.application'

android {
 ...
}

dependencies {
 compile fileTree(dir: 'libs', include: ['*.jar'])
 compile "com.android.support:appcompat-v7:23.0.1"
 compile "com.facebook.react:react-native:+" // From node_modules
<span class="pl-mi1">+ <span style="color: #0000ff;">compile project(':react-native-vector-icons')</span></span>
}</pre>
</div>
</li>
<li>Edit your <strong><span style="color: #008000;">MainApplication.java</span></strong> (deep in <strong><span style="color: #008000;">android/app/src/main/java/&#8230;</span></strong>) to look like this (note <span style="color: #008000;"><strong>two</strong></span> places to edit):
<div class="highlight highlight-source-diff">
<pre>package com.myapp;

<span class="pl-mi1">+ <span style="color: #0000ff;">import com.oblador.vectoricons.VectorIconsPackage;</span></span>

....

 @Override
 protected List<;ReactPackage>; getPackages() {
 return Arrays.<;ReactPackage>;asList(
 new MainReactPackage()
<span class="pl-mi1">+ <span style="color: #0000ff;">, new VectorIconsPackage()</span></span>
 );
 }

}</pre>
</div>
</li>
</ul>
<h3><span style="color: #000080;">Option: With Gradle (recommended)</span></h3>
<p>This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p>Edit <code>android/app/build.gradle</code> ( NOT <code>android/build.gradle</code> ) and add the following at the bottom:</p>
<ul>
<li>Use this if you want to copy all the fonts.</li>
</ul>
<div class="highlight highlight-source-groovy-gradle">
<pre>apply <span class="pl-c1">from</span>: <span class="pl-s"><span class="pl-pds">"</span>../../node_modules/react-native-vector-icons/fonts.gradle<span class="pl-pds">"</span></span></pre>
</div>
<p> ;</p>
<ul>
<li>Use this if you want to copy only some of the fonts.</li>
</ul>
<div class="highlight highlight-source-groovy-gradle">
<pre>project<span class="pl-k">.</span>ext<span class="pl-k">.</span>vectoricons <span class="pl-k">=</span> [
 <span class="pl-c1">iconFontNames</span>: [ <span class="pl-s"><span class="pl-pds">'</span>MaterialIcons.ttf<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>EvilIcons.ttf<span class="pl-pds">'</span></span> ] <span class="pl-c">// Name of the font files you want to copy</span>
]

apply <span class="pl-c1">from</span>: <span class="pl-s"><span class="pl-pds">"</span>../../node_modules/react-native-vector-icons/fonts.gradle<span class="pl-pds">"</span></span></pre>
</div>
</div>