Custom icon not show when build release

Ionic Framework
1

My custom icon not show when I build release. It’s seem can’t find image from path that I was use.
But when I serve or build with no --prod --release everything is fine. Image showed.

ion-icon{
&[class*=“custom-”]{
margin: 0 5px 0 0;
vertical-align: middle;
width:28px;
height:28px;
}

[class*=“wreath”][ng-reflect-is-active=“true”]{
url("…/assets/icon/wreath-active.png") no-repeat 50% 50%;
background-size: contain;
}

[class*=“wreath”][ng-reflect-is-active=“false”]{
url("…/assets/icon/wreath-inactive.png") no-repeat 50% 50%;
background-size: contain;
}
}

my project structure is
/app
/assets/icon <-img in this folder
/img
/pages

and I use this custom icon in page that contain tab component call in attribute tabIcon=“custom-wreath”
*tab compont was not in app.component.ts but in home.ts

2

Hi @Thitikorn!

Silly question: Is the icon being copied to the www when you build? Also, I noticed you are using 3 dots (“…/“) in your relative path.

Best,
Rodrigo

3

icon already in folder www/asset/icon
and 3dot is my fault before I post this topic i had try …/…/assets ,I copy that address and delete it in this forum. Sorry for the confusing.
At first i use .svg file instead of png but its only showed on android. so i try to use png to make it visible on both platform(ios,android). Its worked. but only in debug build not release build.
Thank you for your reply

4

So now i use this css instead. From this forum and custom it. And it work on both debug and release build
.ion-ios-wreath,
.ion-ios-wreath-outline {
content: url("…/assets/icon/wreath-active.png");
margin-top: 1px;
min-width: 2.4rem;
padding: 6px 4px 2px;
opacity: 0.9;
}
.tab-button[aria-selected=true] {
.ion-ios-wreath,
.ion-ios-wreath-outline {
content: url("…/assets/icon/wreath-active.png");
margin-top: 1px;
min-width: 2.4rem;
padding: 6px 4px 2px;
opacity: 0.9;
}
}

1 Like