Issue
I'm trying to change ion-icon
with custom src after ion-tab-button
is clicked
What I have tried, using (click) event to trigger function and change the [src]="..." inside the ion-icon
Is there any proper way to change this hackish style?
HTML:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="news/home" (click)="changeNewsIcon()">
<ion-icon [src]="newsIcon"></ion-icon>
<ion-label class="tab-title">News</ion-label>
</ion-tab-button>
<ion-tab-button tab="user" (click)="changeSearchIcon()">
<ion-icon [src]="searchIcon"></ion-icon>
<ion-label class="tab-title">Search</ion-label>
</ion-tab-button>
<ion-tab-button tab="networking" (click)="changeNetworkIcon()">
<ion-icon [src]="notiIcon"></ion-icon>
<ion-label class="tab-title">Networking</ion-label>
</ion-tab-button>
<ion-tab-button tab="chat" (click)="changeChatIcon()">
<ion-icon [src]="chatIcon"></ion-icon>
<ion-label class="tab-title">Chat</ion-label>
</ion-tab-button>
<ion-tab-button tab="profile" (click)="changeProfIcon()">
<ion-icon [src]="profIcon"></ion-icon>
<ion-label class="tab-title">Profile</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
TS :
newsIcon = './assets/tabs/home.svg';
searchIcon = './assets/tabs/search.svg';
notiIcon = './assets/tabs/group.svg';
chatIcon = './assets/tabs/chat.svg';
profIcon = './assets/tabs/user.svg';
changeNewsIcon(): void {
// change news icon
this.newsIcon = './assets/tabs/clicked-home.svg';
// reset others icon
this.searchIcon = './assets/tabs/search.svg';
this.notiIcon = './assets/tabs/group.svg';
this.chatIcon = './assets/tabs/chat.svg';
this.profIcon = './assets/tabs/user.svg';
}
changeSearchIcon(): void {
// change user icon
this.searchIcon = './assets/tabs/clicked-search.svg';
// reset others icon
this.newsIcon = './assets/tabs/home.svg';
this.notiIcon = './assets/tabs/group.svg';
this.chatIcon = './assets/tabs/chat.svg';
this.profIcon = './assets/tabs/user.svg';
}
...
Appreciate if anyone would help
Solution
Before, I tried to put css color into ion-tab-button
and ion-icon
with an ionic icon. The color change as expected, but not with custom icon.
<ion-tab-button tab="news/home" style="color: blue">
<ion-icon name="home"></ion-icon>
<ion-label class="tab-title">News</ion-label>
</ion-tab-button>
After a day, I try to check why the custom icon won't change the color if we do like this method. Then I try to check the Ionic SVG icon layers in Adobe Illustrator CC. and there is it.
As you can see there is <path>
inside layer 1 (Ionic icon)
And the problem is my SVG file. To make this work with css properties, I just need to edit the layer.
this is the result after editing the layer, work as expected :)
Solution: You just need to add color css and get the right layer SVG icon
Further, I will update how to use custom icon when the tab is active.
UPDATE 2:
This is the working html code:
<ion-tabs>
<ion-tab-bar class="tab-bar" slot="bottom">
<ion-tab-button tab="news/home">
<ion-icon class="icon-news" src="./assets/tabs/md-custom-home.svg"></ion-icon>
<ion-label class="tab-title">News</ion-label>
</ion-tab-button>
<ion-tab-button tab="search">
<ion-icon class="icon-search" src="./assets/tabs/md-custom-search.svg"></ion-icon>
<ion-label class="tab-title">Search</ion-label>
</ion-tab-button>
<ion-tab-button tab="networking">
<ion-icon class="icon-networking" src="./assets/tabs/md-custom-networking.svg"></ion-icon>
<ion-label class="tab-title">Networking</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
SCSS:
ion-tab-button {
--color: #000000;
--color-selected: #00cee5;
}
just make sure to use the right SVG ;)
Answered By - Snowbases
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.