[bottomnavigationbar][IOS] Material design icons doesnt work on active tab

[HamoBoker]

If the demo apps cannot help and there is no issue for your problem, tell us about it

im using material design icons on android it works fine, but on ios when MDBottomNavigationTab is active icon is showing ? symbol

Which platform(s) does your issue occur on?

iOS both emulator 15.2 and physical 15.3.1

Please, provide the following version numbers that your issue occurs with:

"dependencies": {
    "@nativescript-community/ui-material-bottom-navigation": "^7.0.1",
    "@nativescript-community/ui-material-bottomnavigationbar": "^7.0.1",
    "@nativescript-community/ui-material-bottomsheet": "^7.0.1",
    "@nativescript-community/ui-material-core": "^7.0.1",
    "@nativescript-community/ui-material-progress": "^7.0.1",
    "@nativescript-community/ui-material-snackbar": "^7.0.1",
    "@nativescript-community/ui-material-tabs": "^7.0.1",
    "@nativescript/core": "^8.2.1",
    "@nativescript/datetimepicker": "^2.1.9",
    "@nativescript/firebase-auth": "^1.0.6",
    "@nativescript/firebase-core": "^1.0.6",
    "@nativescript/firebase-crashlytics": "^1.0.6",
    "@nativescript/firebase-firestore": "^1.0.6",
    "@nativescript/localize": "^5.0.4",
    "@nativescript/tailwind": "^2.0.0",
    "@nativescript/theme": "~3.0.2",
    "@nstudio/nativescript-loading-indicator": "^4.1.2",
    "nativescript-drop-down": "^6.0.1",
    "nativescript-ui-listview": "^10.0.2",
    "nativescript-vue": "~2.9.1",
    "nativescript-vue-router-extended": "^1.1.8",
    "tailwindcss": "^3.0.23",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@mdi/font": "^6.5.95",
    "@nativescript/android": "8.2.2",
    "@nativescript/eslint-plugin": "^0.0.4",
    "@nativescript/ios": "8.2.1",
    "@nativescript/webpack": "~5.0.6",
    "@typescript-eslint/parser": "^5.14.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.5.0",
    "nativescript-vue-template-compiler": "~2.9.1",
    "prettier": "^2.5.1",
    "scss-symbols-parser": "^2.0.1",
    "string-replace-loader": "^3.1.0"
  }

Is there any code involved?

<template>
  <Page backgroundSpanUnderStatusBar="true" androidStatusBarBackground="#93C5FDFF">
    <ActionBar
      :title="isIOS ? 'Bitlims' : ''"
      height="auto"
      backgroundColor="transparent"
      flat="true"
      style="margin: 0; padding: 0"
    >
      <GridLayout v-if="!isIOS" columns="auto,*" width="100%">
        <Image col="0" src="~/images/logo_main.png" height="60" class="mt-1" />
      </GridLayout>
    </ActionBar>

    <GridLayout rows="*, auto">
      <MDTabs row="0" :selectedIndex="currentTab" swipeEnabled="false">
        <MDTabContentItem>
          <about-page />
        </MDTabContentItem>
        <MDTabContentItem>
          <home-page />
        </MDTabContentItem>
        <MDTabContentItem>
          <profile-page />
        </MDTabContentItem>
      </MDTabs>
      <MDBottomNavigationBar
        ref="bottomBar"
        height="55"
        activeColor="#1685ff"
        inactiveColor="#777"
        backgroundColor="white"
        :selectedTabIndex="currentTab"
        row="1"
        @tabSelected="onBottomNavigationTabSelected"
      >
        <MDBottomNavigationTab :title="'bottomNav.about' | l" icon="font://mdi-information-outline" class="mdi" />
        <MDBottomNavigationTab :title="'bottomNav.home' | l" icon="font://mdi-clipboard-text-outline" class="mdi" />
        <MDBottomNavigationTab :title="'bottomNav.profile' | l" icon="font://mdi-account" class="mdi" />
      </MDBottomNavigationBar>
    </GridLayout>
  </Page>
</template>

<script>
  import { isIOS } from '@nativescript/core'
  import * as frameModule from '@nativescript/core'
  import AboutPage from '~/pages/About'
  import HomePage from '~/pages/Home'
  import ProfilePage from '~/pages/Profile'

  export default {
    name: 'Main',
    components: { AboutPage, ProfilePage, HomePage },
    data() {
      return {
        currentTab: 1,
        isIOS: isIOS
      }
    },
    methods: {
      onNavigationButtonTap() {
        frameModule.Frame.topmost().goBack()
      },
      onBottomNavigationTabSelected(args) {
        this.currentTab = args.newIndex
      }
    }
  }
</script>

[farfromrefug]

@HamoBoker has to be a font issue. If the first and last are working but not the second one. Maybe for some reason mdi-clipboard-text-outline is not recognized. check if for example mdi-information-outline works for the 3

[HamoBoker]

@farfromrefug Thanks for your great work and quick response,

No, if i click for example on one of the other tabs it will occur, it happens only on active tab but when its inactive its works fine

[farfromrefug]

@HamoBoker fixed in 7.0.2

[HamoBoker]

Nativescript is lucky to have you, thank you so much.