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>
@Lucascosta I just inserted
– Anderson Souza