Ion-tab icons stop showing with --prod - CLI 3.10.3

Ionic Framework ionic-v3
1

So I have an App created with Ionic 2.2.1 and I only upgraded the CLI to the latest, the App loads much faster now and seems to work fine. Only problem I am facing is that when I compile the App with --prod - the icons in the ion-tab navigation bar disappear.
I inspected the App in chrome and something very strange is happening, if I run on the simulator with --debug, the icons appear and I see in Chrome that the icons are being loaded and it refers to main.js calling them.
When I run on the simulator with --prod, the icons disappear and I do not see them loading at all in chrome.

I also compiled the app with --prod and installed the apk on a real phone and the icons did not show.

Any idea what the problem might be?

1 Like
2

Missing font files??

Are you seeing this problem with…

ionic serve --prod

3

No, I just tired ionic server --prod and the icons appear normally.

If there were missing font files, why would it work without --prod and disappear when I add the --prod?

4

Stumper.

Are you creating your IPA/APK’s locally or using a third party service and if so which one?

It’s entirely up to you but if you want to share your git repo I’m happy to have a look.

5

I create it locally just using the command line. I am running on Linux. Unfortunately the repo is not public and there’s an nda involved. I can post bits and parts of it here if you know where to look/check. or I can arrange an online session for you to have a look.

6

Another weird thing as well is that the notifications stopped showing in the status bar. Even more weird is that I created an apk with --debug and also the icons did not show. It only shows on the simulator and with --debug, every other combination does not work.

Any of the Ionic team can comment on this?

7

@Judgewest2000
I am suspecting that the code below gets messed up during minifying or uglyfying… could that be? In such case, what do you think would work?

$tab-items: ('item1', 'item2', 'item3', 'item4', 'item5');
ion-icon {
  min-height: 2rem;
  @each $icon in $tab-items {
    &[ng-reflect-name="#{$icon}"] {
      background-image: url(../assets/images/tabs/#{$icon}.png);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      &[ng-reflect-is-active="true"] {
        background-image: url(../assets/images/tabs/#{$icon}-active.png);
      }
    }
  }
}
8

sorry i have no idea what that code is referring to…

Going back to basics, can you just create a blank ionic app, add the ion-icons and see if it displays in all your scenarios?

9

this is code in the overrides.scss file in the src/theme/common

10

And if you take it out…?

11

This is the code that actually make the icons show correctly. I am guessing it does not get minified or uglified correctly when I use --prod

12

I believe as long as your code is in the vaiables.scss or imported into the variables.scss it’ll be included.

Can you try just chucking that code directly into there?

13

Just did and tried… no luck there.

14

I better walk away from that one I’m afraid. This is quite a bit more custom than just using the ion-icons as withthis…

Good luck

15

I discovered another thing. The generated code for the menu item with --prod ignores the scss written in the overrides.scss file and so the < !–template binding {} --> comes out empty. Check the code generated with --prod and --debug below.

The code for my menu items is
the html page

<ion-tabs selectedIndex="2">
  <ion-tab [root]="circle" tabTitle="Circle" tabIcon="circle" [tabBadge]="messageNotificationsCount"></ion-tab>
  <ion-tab [root]="calendar" tabTitle="My Events" tabIcon="agenda"></ion-tab>
  <ion-tab [root]="home" tabTitle="Seena" tabIcon="seena"></ion-tab>
  <ion-tab [root]="notifications" tabTitle="Notifications" tabIcon="bell" [tabBadge]="normalNotificationsCount"></ion-tab>
  <ion-tab [root]="profile" tabTitle="You" tabIcon="profile"></ion-tab>
</ion-tabs>

The scss

tabs-navigation {
	.tabbar
	{
		background: color($colors, tabs-navigation, base) !important;
		border-top-color: darken(color($colors, tabs-navigation, base), 6%) !important;

		.tab-button
		{
			color: color($colors, tabs-navigation, contrast);
		}

		.tab-button:hover:not(.disable-hover),
		.tab-button[aria-selected=true]
		{
		  color: $theme-color-1;
		}
	}
}

The wp.scss

ion-app.wp {
	tabs-navigation {
		.tabbar
		{
			.tab-button[aria-selected=true]
			{
				border-bottom-color: $theme-color-1;
			}
		}
	}
}

and the code in the overrides.scss is

$tab-items: ('circle', 'agenda', 'seena', 'profile', 'bell');
ion-icon {
  min-height: 2rem;
  @each $icon in $tab-items {
    &[ng-reflect-name="#{$icon}"] {
      background-image: url(../assets/images/tabs/#{$icon}.png);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      &[ng-reflect-is-active="true"] {
        background-image: url(../assets/images/tabs/#{$icon}-active.png);
      }
    }
  }
}

When using the --debug (or just not using --prod) the generated code for the menu item is

<a class="tab-button has-title has-icon disable-hover" href="#" role="tab" ng-reflect-tab="[object Object]" id="tab-t0-0" aria-controls="tabpanel-t0-0" aria-selected="false"><!--template bindings={
  "ng-reflect-ng-if": "circle"
}--><ion-icon class="tab-button-icon icon icon-md ion-md-circle" role="img" aria-label="circle" ng-reflect-name="circle"></ion-icon><!--template bindings={
  "ng-reflect-ng-if": "Circle"
}--><span class="tab-button-text">Circle</span><!--template bindings={
  "ng-reflect-ng-if": null
}--><div class="button-effect"></div></a>

But when using the --prod when building, the generated code for the menu item is

<a class="tab-button has-title has-icon disable-hover" href="#" role="tab" id="tab-t0-0" aria-controls="tabpanel-t0-0" aria-selected="false"><!--template bindings={}--><ion-icon class="tab-button-icon icon icon-md ion-md-circle" role="img" aria-label="circle"></ion-icon><!--template bindings={}--><span class="tab-button-text">Circle</span><!--template bindings={}--><div class="button-effect" style="transform: translate3d(-13px, -23px, 0px) scale(1); height: 105px; width: 105px; opacity: 0; transition: transform 317ms, opacity 222ms 95ms;"></div></a>