title: ionic ion-tab icon with custom image
body: <p>Here's my <a href="https://forum.ionicframework.com/t/ion-tab-icon-with-custom-img/53154" rel="nofollow">original question on ionic forum</a>. There has been no responses to it for some time so I thought I could hopefully get some help from here :(</p>
  
  <p>So, my question is really the title. I would like to use my custom image as the icon for ion-tab in my ionic application. I've checked that it works via <code>ionic serve</code> by doing it as the following:</p>
  
  <p><code>tabs.html</code></p>
  
  <pre><code>&lt;ion-tabs class="tabs-icon-bottom tabs-color-active"&gt;
    &lt;!-- this icon does not load --&gt;
    &lt;ion-tab title="LIVE" icon="tab-live energized" href="tab/live"&gt;
      &lt;ion-nav-view name="tab-live"&gt;&lt;/ion-nav-view&gt;
    &lt;/ion-tab&gt;
  
    &lt;ion-tab title="REPLAY" icon="tab-replay energized" href="tab/replay"&gt;
      &lt;ion-nav-view name="tab-replay"&gt;&lt;/ion-nav-view&gt;
    &lt;/ion-tab&gt;
  
    &lt;ion-tab title="SETTINGS" icon="ion-android-options energized" href="tab/setting"&gt;
      &lt;ion-nav-view name="tab-setting"&gt;&lt;/ion-nav-view&gt;
    &lt;/ion-tab&gt;
  &lt;/ion-tabs&gt;
  </code></pre>
  
  <p><code>style.css</code></p>
  
  <pre><code>...
  .tab-live {
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-image: url('../img/live.png');
  }
  .tab-replay {
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    background-image: url('../img/replay.png');
  }
  </code></pre>
  
  <p>however, when I run the app on my android device, it says <code>Failed to load resource: net::ERR_FILE_NOT_FOUND</code> for my <code>tab-live</code> and the <code>tab-live</code> icon won't load. From what I understand, this error occurs when the app tries to load a certain asset file before it gets loaded in to the memory. But only the <code>tab-live</code> image fails to load while all other images loads fine.</p>
  
  <p>If it could be of an issue, the <code>tab/live</code> page is what loads when the app starts, and the size of my <code>live.png</code> file is about <code>5.54kb</code>. I have another image that I use in this <code>tab/live</code> page that is larger this image, but it loads fine and I use an <code>img</code> tag with <code>ng-src={{ btnImage }}</code> to change it around.</p>
  
  <p>So, what could be causing this problem and how could I resolve it?</p>
  
  <p>Thanks in advance.</p>