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?

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.

Answer 1

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)

Answer 2

I think you get your answer from below link:

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

I hope it helps you.:)

Answer 3

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