Ionic 2 - Custom tabIcon images do not appear on the device

Asked

Viewed 519 times

0

I’m trying to put some custom icons (in svg or png) in my app tab, Ionic serves works smoothly, but when running on the device (android) the icon does not appear, I’m imagining it may be permission or file path (which are in the Assets/images/tabIcon/image.svg). someone has been there?

import { Component } from '@angular/core';

import { ServicosPage } from '../servicos/servicos';
import { CotacaoPage } from '../cotacao/cotacao';
import { EventosPage } from '../eventos/eventos';
import { DicasPage } from '../dicas/dicas';
import { ConfiguracoesPage } from '../configuracoes/configuracoes';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = ServicosPage;
  tab2Root: any = CotacaoPage;
  tab3Root: any = ConfiguracoesPage;
  tab4Root: any = DicasPage;
  tab5Root: any = EventosPage;
  

  constructor() {

  }
}
// CustomIcons
// --------------------------------------------------
// Icon used in tabs
// http://ionicframework.com/docs/v2/ionicons/

.ion-ios-iconservicos,
.ion-md-iconservicos {
  content: url(../../assets/images/tabIcon/iconServicos.svg);
  width: 42px;
  height: 42px;
  padding: 6px 4px 2px;
  opacity: 0.9;
}

.ion-ios-iconcotacao,
.ion-md-iconcotacao {
  content: url(../../assets/images/tabIcon/iconCotacao.svg);
  width: 42px;
  height: 42px;
  padding: 6px 4px 2px;
  opacity: 0.9;
}

.ion-ios-icondicas,
.ion-md-icondicas {
  content: url(../../assets/images/tabIcon/iconDicas.svg);
  width: 42px;
  height: 42px;
  padding: 6px 4px 2px;
  opacity: 0.9;
}

.ion-ios-iconconfig,
.ion-md-iconconfig {
  content: url(../../assets/images/tabIcon/iconConfig.svg);
  width: 42px;
  height: 42px;
  padding: 6px 4px 2px;
  opacity: 0.9;
}

.ion-ios-iconeventos,
.ion-md-iconeventos {
  content: url(../../assets/images/tabIcon/iconEventos.svg);
  width: 42px;
  height: 42px;
  padding: 6px 4px 2px;
  opacity: 0.9;
}
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Serviços" tabIcon="iconservicos"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Cotações" tabIcon="iconcotacao"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Configuração" tabIcon="iconconfig"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Dicas" tabIcon="icondicas"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Eventos" tabIcon="iconeventos"></ion-tab>  
</ion-tabs>

1 answer

0


After searching and placing the question in the group of Ionic from Facebook the solution is to put the name of the image folder as img or was putting as images and Ionic was not recognizing.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.