Icons not appear on my app

Ionic Framework ionic-v3
1

11-30-2018%208-41-06%20AM
11-30-2018 8-41-06 AM.png328×502 8.8 KB

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.

1 Like
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

11-30-2018%209-49-03%20AM
11-30-2018 9-49-03 AM.png308×502 1.9 KB

9

11-30-2018%209-49-03%20AM
11-30-2018 9-49-03 AM.png308×502 1.9 KB 

<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.

1 Like