I'm trying to put custom icons (in svg or png) on the tab of my app, the ionic serve works quietly, but when running on the device (android) the icon does not appear, I'm wondering what permission (which are in the assets / images / tabIcon / image.svg). Has anyone ever been through this?
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>