Icon is not displaying in push notifications in ionic 2

Question

I am trying to display app icon in notification. But it is displaying blank icon.

I have given pushoptions as below:

 const options: PushOptions = {
      android: {
        titleKey: 'App',
        sound: 'true',
        icon: 'res/drawable/notification_icon',
        topics: ['MyTopic']
      },
      ios: {
        alert: 'true',
        badge: false,
        sound: 'true'
      },
      windows: {}
    };

and copied the icon image as below which has resolution of 40*40px.

<resource-file src="resources/notification_icon.png" target="res/drawable/notification_icon.png" />

Is there anything that I am missing? enter image description here

Update:

I followed this link : https://github.com/ionic-team/ionic-cli/issues/608 and tried it by copying all the notification icon under resources/android/notification/drawable-XYZ/ic_stat_ac_unit.png to res/drawable-XYZ/ic_stat_ac_unit.png using the following statements:

<resource-file src="resources/android/notification/drawable-hdpi/ic_stat_ac_unit.png" target="res/drawable-hdpi/ic_stat_ac_unit.png" />
        <resource-file src="resources/android/notification/drawable-mdpi/ic_stat_ac_unit.png" target="res/drawable-mdpi/ic_stat_ac_unit.png" />
        <resource-file src="resources/android/notification/drawable-xhdpi/ic_stat_ac_unit.png" target="res/drawable-xhdpi/ic_stat_ac_unit.png" />
        <resource-file src="resources/android/notification/drawable-xxhdpi/ic_stat_ac_unit.png" target="res/drawable-xxhdpi/ic_stat_ac_unit.png" />
        <resource-file src="resources/android/notification/drawable-xxxhdpi/ic_stat_ac_unit.png" target="res/drawable-xxxhdpi/ic_stat_ac_unit.png" />

and modified PushOptions in app.component.ts to :

android: {
    titleKey: 'App',
    sound: true,
    vibrate:true,
    icon: 'ic_stat_ac_unit',
    iconColor:'#343434',
    topics: ['MyTopic']
  }

Even this did not worked - Same Issue.

Krsna Kishore · Answer 1 · 2017-10-17T05:00:16.010

2

it is probably of not setting the alpha channel on the icon in the shape you want to display. Android 5.0+ adds a white mask to all small notification icons. you can be using the Android Asset Studio to create the icon set as it will show you how it will look on the device to make sure you have it correct.

In Android 5.0+, push notification icon has to be two-color: transparent background + white foreground; otherwise the default app icon is taken, and anything non-transparent is displayed as white (so very likely, the user will see a white)

edited Oct 17 '17 at 05:00

answered Oct 17 '17 at 04:32

Krsna Kishore

8,233
4
32
48

I tried with https://i.stack.imgur.com/Vr27p.png which is showing on Android Asset Studio link but not on device. FYI, I am using ionic 2 – user1188867 Oct 17 '17 at 05:49
@user1188867 for Ionic , please gothrough this [issue](https://github.com/ionic-team/ionic-cli/issues/608) it should guide you the correct path – Krsna Kishore Oct 17 '17 at 05:50
I think url link is broken. Please verify and post it again. – user1188867 Oct 17 '17 at 06:18
@user1188867 actually opeing from comment its not working , try this out https://github.com/ionic-team/ionic-cli/issues/608 – Krsna Kishore Oct 17 '17 at 06:20
I have looked at it and tried it before but it did not work for me. I will try it again. – user1188867 Oct 17 '17 at 06:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156893/discussion-between-webruster-and-user1188867). – Krsna Kishore Oct 17 '17 at 08:53

score 1 · Answer 2 · answered Oct 23 '17 at 13:08

1

I think you get your answer from below link:

https://stackoverflow.com/a/30795471/7329597

I hope it helps you.:)

answered Oct 23 '17 at 13:08

Sejal Baraiya

238
2
9

score 1 · Accepted Answer · answered Nov 18 '17 at 05:28

I used the ionic fcm plugin to fix the issue. I just replaced cordova push plugin with Cordova fcm plugin icon displayed. I wasted a lot of time on push plugin.I hope this answer helps others.

Please refer to below links for more information :

https://ionicframework.com/docs/native/fcm/

https://github.com/fechanique/cordova-plugin-fcm

Icon is not displaying in push notifications in ionic 2

3 Answers3