Add documentation/examples for icon/smallIcon

I see no option to submit a PR to the wiki, so I’m posting my suggestion as an issue.

Lots of questions are going around about how to set the icon/smallIcon resource. This could be explained on https://github.com/katzer/cordova-plugin-local-notifications/wiki/04.-Scheduling or https://github.com/katzer/cordova-plugin-local-notifications/wiki/10.-URIs

I suggest the following addition:

---

What type or size of icons to generate?

• https://developer.android.com/guide/practices/ui_guidelines/icon_design_action_bar.html
• https://romannurik.github.io/AndroidAssetStudio/icons-notification.html#source.type=clipart&source.clipart=ac_unit&source.space.trim=1&source.space.pad=0&name=ic_stat_example

Icons should be placed in the platforms/android/res/drawable-* folders.

The resource should then be set like this (without extension):

smallIcon: "res://my_notification_icon",

When using a build service like Ionic Pro, you cannot place the images in platforms/android/ directly. You can make Cordova copy the files from a source folder by configuring your icons in config.xml with <resource-file>:

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

[pzanitti]

Great post.

Heads up: If using Cordova Android 7 (<engine name="android" spec="^7.0.0" />) this won’t work, you won’t know why and it will also break your platform. You have to prepend app/src/main/ to the target path like so:

<platform name="android">
    ...
    <resource-file src="res/my_notification_icon/android/ldpi.png" target="app/src/main/res/drawable-ldpi/my_notification_icon.png" />
    <resource-file src="res/my_notification_icon/android/mdpi.png" target="app/src/main/res/drawable-mdpi/my_notification_icon.png" />
    <resource-file src="res/my_notification_icon/android/hdpi.png" target="app/src/main/res/drawable-hdpi/my_notification_icon.png" />
    <resource-file src="res/my_notification_icon/android/xhdpi.png" target="app/src/main/res/drawable-xhdpi/my_notification_icon.png" />
    <resource-file src="res/my_notification_icon/android/xxhdpi.png" target="app/src/main/res/drawable-xxhdpi/my_notification_icon.png" />
    <resource-file src="res/my_notification_icon/android/xxxhdpi.png" target="app/src/main/res/drawable-xxxhdpi/my_notification_icon.png" />
</platform>

[boltex]

I’ve spent a couple hours reading contradicting tutorials about how to set icon, and smallIcon for this plugin. I just could not get it to work,. going to fallback on the ‘bell’ icon for now. oh well…

I wish there was a ‘recent’ project (not done for some old android 4.0) where we could actually see explicitly how to get those icons to appear. (required file format, required file location, required path specification when specifying this in JS. with or without file extension, with or without filepath, etc…)

Thanks in advance for anyone endeavoring such a thing! 😃