Ionic 2 : Local notification icon

Question

I use this plugin to have local notification : https://github.com/katzer/cordova-plugin-local-notifications/wiki/03.-Installation

I want to have a specific icon in my notification. It is located in my /www/assets/images/ folder.

I try this way but it doesn't work, I have a square icon with a bell :

public schedule() {
    cordova.plugins.notification.local.schedule({
      title: "New Message",
      message: "Hi, are you ready? We are waiting.",
      sound: null,
      at: new Date(new Date().getTime() + 5 * 1000),
      icon: 'file://assets/images/logo2.png'
    });
  }

Someone can show me the type of path I have to write ? I'm lost.

Answer 1

I found a solution :

I create a new folder named "drawable" in /platforms/android/res/ I put my image in my new folder with name "ic_notifications.png" and "ic_notifications_small.png".

In my code I wrote

cordova.plugins.notification.local.schedule({
      id: 2,
      title: "Notification",
      message: "Retour à l'application",
      sound: null,
      at: new Date(new Date().getTime() + 5 * 1000),
      icon: 'ic_notifications',
      smallIcon: 'ic_notification_small'
    });

And it works !

Answer 2

If your only problem is with the notifications icons appearing correctly on Android, the following worked for me - take the drawable-xhdpi-icon icon (size 96x96), rename it icon.png and place it in two places:

• /src/assets/img
• /platforms/android/res/drawable

The drawable folder is a new folder which can be created by copying platforms/android/res/mipmap-xhdpi to platforms/android/res/drawable manually or with the aid of a hook. In your code, the local or geofence notification is referenced as follows:

smallIcon: 'res://icon',
icon: 'file://assets/img/icon.png'

If ionic cordova resources is part of the problem, you can do your own one-time setup by taking your largest icon and, with the help of a resizing tool such as resizeimage.net, create a set of icons for iOS and Android. The Excel here https://github.com/dovk/howto_resources-folder has a list of the sizes and names of the .png files to create. You then place them in their respective resources folder just like ionic cordova resources would have done - for example in resources/android/icon, resources/ios/splash and so on. If you do so, then ionic cordova platform add android or ionic cordova platform add ios should not be used anymore, as this also does ionic cordova resources - What you need to do is cordova platform add (without the ionic in the beginning).

Answer 3

Give image path as below without adding extension to the image file name LocalNotifications.schedule({ id: 1, title: "Notification Title", text: "Notification Text", icon: 'assets://images/image_name' });

Answer 4

For Local push notification of ionic 2 plugin you can set the icon like below. Here icon.png will be taking from the drawable folder in case of android. And you can configure ionic to copy the local image file to be copied in drawable folder by adding below in config file under android platform section.

<platform name="android">
<resource-file src="resources/android/icon/icon.png" target="res/drawable/icon.png"/>
</platform>


this.localNotifications.schedule({
          id: 1,
          title: data.title,
          text: data.body,
          data: data,
          icon: "res://icon.png",
          smallIcon:"res://icon.png"
        });