Issue with displaying tab icons in Ionic 4

After updating the versions of Angular, Cordova, and Ionic, I started experiencing an issue with the tab icons displaying partially. Specifically, when my app loads with 4 tabs, only the first and third icons are visible. However, upon touching one of the "invisible" icons, it becomes visible indicating that the tab is selected. But as soon as I switch to another tab, the icon disappears again while all the tab titles remain displayed.

I would appreciate any help in resolving this issue.

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
 <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"> 
</ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion- 
 tab>
<ion-tab [root]="tab4Root" tabTitle="Impostazioni" tabIcon="settings"></ion- 
tab>


$ ionic --version
4.3.0

$ cordova --version
8.1.2 (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12717d60767d64733f7e7b70522a3c233c23">[email protected]</a>)

$ npm --version
5.6.0

"dependencies": {
"@angular/animations": "7.0.2",
"@angular/cli": "^7.0.3",
"@angular/common": "7.0.2",
"@angular/compiler": "7.0.2",
"@angular/compiler-cli": "7.0.2",
"@angular/core": "7.0.2",
"@angular/forms": "7.0.2",
"@angular/http": "7.0.2",
"@angular/platform-browser": "7.0.2",
"@angular/platform-browser-dynamic": "7.0.2",
"@ionic-native/contacts": "^4.15.0",
"@ionic-native/core": "^4.16.0",
"@ionic-native/globalization": "^4.16.0",
"@ionic-native/local-notifications": "^4.15.0",
"@ionic-native/splash-screen": "~4.16.0",
"@ionic-native/sqlite": "^4.16.0",
"@ionic-native/status-bar": "~4.16.0",
"@ionic/storage": "2.2.0",
"@ngx-translate/core": "^11.0.0",
"@ngx-translate/http-loader": "^4.0.0",
"cordova-android": "7.1.1",
"cordova-browser": "5.0.4",
"cordova-plugin-badge": "^0.8.7",
"cordova-plugin-contacts": "^3.0.1",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-globalization": "^1.11.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.2.0",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^2.5.0",
"ionic-angular": "3.9.2",
"ionicons": "4.4.6",
"node-sass": "^4.9.4",
"rxjs": "6.3.3",
"rxjs-compat": "^6.3.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
 }

"devDependencies": {
"@ionic/app-scripts": "^3.2.0",
"typescript": "~3.1.5"
 },

 Android device version: 5.1
angulartypescriptionic-frameworktabsicons

Answer №1

Back on September 18, 2017, a problem arose when the Ionicons v4 was released by the Ionic team.

  • With the release of Ionicons v4, all the "...-outline" icons were removed by the Ionic team.

https://i.sstatic.net/z3kB1.png

  • Despite this update, the <ion-tab> still behaves distinctly on iOS. When an Ionicon is not selected, it appends "-outline" to the icon's name. You can observe this behavior as the search icon transitions:

https://i.sstatic.net/AglFt.gif

As a result, unselected tabs experience issues with disappearing icons.

The workaround that I've found effective is to specifically request icons from the Material Design or "md-" series. While this means sacrificing native iOS icons, at least the risk of disappearing icons is mitigated.

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="md-home">
  </ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="md-information-circle"> 
  </ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="md-contacts">
  </ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Impostazioni" tabIcon="md-settings">
  </ion-tab>

This issue has also been discussed on the Ionic forums.

Answer №2

I managed to resolve the issue by downloading the SVG from Ionicons.

<ion-tab-button tab="map">
  <ion-icon src="./assets/icon/map-sharp.svg"></ion-icon>
</ion-tab-button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Record modified fields using Angular Reactive Forms and store them in a list

Is there a method available that can identify and return the fields that have been modified within a form? I am looking to generate a list of string values for the changed fields. I am dealing with a complex form containing approximately 30 different fiel ...

angulartypescriptangular-reactive-forms

Having trouble converting the response into a valid TypeScript value for storage

These are the interfaces I have described: enum ProductType {current, closed, coming} export interface CurrentProductForCarousel { type_product:ProductType.current; offers: ProductMainInfo[] } export interface ProductMainInfo { id: number; disclai ...

angulartypescript

What are the new features for listening to events in Vue 3?

Currently, I am manually triggering an event: const emit = defineEmits<{ (e: 'update:modelValue', value: string | number): void }>() // [..] <input type="text" :value="modelValue" @input="emit(&apos ...

typescriptvue.jsvuejs3

Explore visuals in the component repository

I am currently working on an Angular 7 component library and am facing some challenges in adding images for buttons and other elements. My project structure is organized as follows: projects components src lib myComponent assets ...

angularangular-components

transforming the accordion into a checkbox

https://i.sstatic.net/5y2gv.pngWhile working on my Angular application, I encountered an issue with using the Bootstrap accordion component. I am trying to make the accordion function as a checkbox, where when the checkbox is checked, the accordion expand ...

htmlangularcheckboxbootstrap-4accordion

The local scope in Angular is inaccessible within an observable subscription

I've been grappling with this issue for quite some time and have experimented with numerous solutions. It seems that within my subscribe function, I'm unable to access ChangeDetectorRef or NgZone in order to trigger an update on the scope. Why ...

angularrxjsangular2-services

Discovering the specific type of an object property in TypeScript

I am currently working on implementing a lookup type within an object. Imagine my object structure as follows: class PersonList { persons = { john: 'description of john', bob: 'description of bob' } } I want to create a ge ...

typescript

Obtaining an instance of the CKEditor Editor in TypeScript with CKEditor 4: what's the best way?

Can someone explain how to utilize the CKEDITOR 4 plugin in TypeScript for an Angular 9 application? I am looking to set the configuration through TypeScript (specifically for autogrow) and also implement an INSERT HTML function. I have already imported ...

angulartypescriptckeditoreditorinstance

Error: Unable to locate the variable 'content' in the TypeScript code

Having an issue with my navigateToApp function. In the else condition, I am calling another function called openModalDialog(content). Unfortunately, I am encountering an error stating Cannot find name content. Can someone help me identify what is wrong h ...

typescript

find the element in cypress with multiple child elements

Looking for a way to target the first HTML element that contains more than 2 children. Another option is to access the children elements of the first parent element. <div class="market-template-2-columns"> <button type="button&q ...

typescriptcypress

"What is the best way to specify a type for the src attribute in a tsx file within a

<Image src= { sessionData?.user.image} alt="user" width={100} height={100} />` An issue has been encountered: There is a type error stating that 'string | null | undefined' cannot be assigned to type 'stri ...

typescriptnext.jstsxt3

Using Angular rxjs to efficiently make multiple API calls and merge their results in one response

After successfully making multiple calls to the same API with different payloads and merging the results into arrays of objects, I now need to mark each object in the result array for filtering purposes. For example, I want to add a property called api_id ...

angularrxjs

Issue encountered while attempting to run an Angular project using the CLI: "Module not found - Unable to resolve 'AngularProjectPath' in 'AngularProjectPath'"

Just like the title suggests, I'm facing an issue with compiling my angular project. It seems to be having trouble resolving my working directory: Error: Module not found: Error: Can't resolve 'D:\Proyectos\Yesoft\newschool& ...

angulartypescript

Establishing a custom variable within a recurring component in a form for the purpose of validation

For my booking form process, I have different sections for adults, pensioners, children, and infants. While they all share the same four inputs, each section also has some unique input fields based on the type of customer. To streamline the duplicate secti ...

angular

What is the best way to trigger a function when a button is enabled in Angular 8?

Here is a portion of my sign-in.component.html file. I have created a function in the corresponding sign-in.component.ts file that I want to trigger when the button below becomes enabled. Here is an example of what I am trying to achieve: <div class= ...

javascripthtmlangularangular8

It's possible that the "device.interfaces" variable has not been defined

I am currently working on creating a USB driver in TypeScript using the libusb library to adjust my keyboard lighting. However, I encountered an issue where I received a 'possibly undefined' error when trying to retrieve the interface number. The ...

typescript

When removing the class "img-responsive" from an image, the bootstrap columns begin to overlap

Just starting out with Bootstrap while working on an Angular2 project and I have a question. Currently, I have a map-component taking up 3 columns on the left-hand side, but every time I resize the browser, the image also resizes. I want the image to rema ...

htmlcsstwitter-bootstrapangularangular-ui-bootstrap

The type '{ domain: any; domainDispatch: React.Dispatch<any>; }' cannot be assigned to a type 'string'

Within my codebase, I am encountering an issue with a small file structured as follows: import React, { createContext, useContext, useReducer } from 'react' const initState = '' const DomainContext = createContext(initState) export co ...

reactjstypescriptreact-hooks

Creating an npm module using an external JavaScript API script

I am currently in the process of creating an npm package using code from this repository. In my possession is the "minified" js file called http_www.webglearth.com_v2_api.js, which is automatically downloaded by IntelliJ when the <script src=""> tag ...

javascriptnode.jsangularnpmwebgl-earth

Leveraging TypeScript 2.1 and above with extended tsconfig configurations

Recently, I have been experimenting with the new extends feature in the tsconfig.json file that allows developers to create a base configuration which other modules can extend or modify. Although it is functional, it is not working as anticipated. Strange ...

typescripttsconfig