Icons not appear on my app


#1

how to solve this problem all icons on my app not showing :sob:


#2

Can you share your html code here? So that it will be easier to help you.


#3

tabs-html :

<ion-tabs>
  <ion-tab [root]="homeRoot" tabTitle="الرئيسية" tabIcon="home">
  </ion-tab>
  <ion-tab [root]="profileRoot" tabTitle="بياناتي" tabIcon="person"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
  homeRoot: any;
  profileRoot: any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.homeRoot = "HomePage";
    this.profileRoot = "ProfilePage";

  }
}


#4
<ion-tabs>
  <ion-tab [root]="homeRoot" tabTitle="الرئيسية" >
      <ion-icon name="home"></ion-icon>
  </ion-tab>
  <ion-tab [root]="profileRoot" tabTitle="بياناتي" >
      <ion-icon name="person"></ion-icon>
  </ion-tab>
</ion-tabs>

Try this code and see, I just did some small modification in your html code.


#5

11-30-2018%209-25-38%20AM

icon disappeared :frowning:


#6

is these icons showing in ion-content ?


#7
<ion-content>
     <ion-tabs>
     <ion-tab [root]="homeRoot" tabTitle="الرئيسية" tabIcon="home">
    </ion-tab>
    <ion-tab [root]="profileRoot" tabTitle="بياناتي" tabIcon="person"></ion-tab>
    </ion-tabs>
</ion-content>

try this.


#8


#9

<ion-content>
  <ion-tabs>
  <ion-tab [root]="homeRoot" tabTitle="الرئيسية" tabIcon="home">
 </ion-tab>
 <ion-tab [root]="profileRoot" tabTitle="بياناتي" tabIcon="person"></ion-tab>
 </ion-tabs>
</ion-content>

#10
<ion-content padding></ion-content>

<ion-tabs>
  <ion-tab [root]="homeRoot" tabTitle="الرئيسية" tabIcon="home">
 </ion-tab>
 <ion-tab [root]="profileRoot" tabTitle="بياناتي" tabIcon="person"></ion-tab>
</ion-tabs>

sorry mate, this is my last suggestion, if this doesn’t work then you gotta find other alternative.


#11

not working :frowning: thanks my friend for your time


#12

I found this in stackoverflow, maybe you can take a look.


#13

Don’t wrap the <ion-tabs> component inside a <ion-content> tag. That is probably the source of the issue.

A good debugging strategy for issues like this is to create a fresh project and focus ONLY on the issue, thus reducing the variables. I just created a new app using the tab template and Ionic 3, changed the icon name and the labels to your sample and it was fine. Since I don’t have your full app, I can spot what might be the issue.