Native Push - Icon blank square

Hi, I’m having problems with the icon display when I recieve a notification.

I tried everything, calling res://drawable/iconname, like I have in my local notifications, which works perfectly I tried just naming the icon like icon: ‘iconname’;

Everything, but I can’t make it work.

The icon has a transparent background and the other is white, like it should be.

This is my code:

   const options: PushOptions = {
      android: {
        senderID: '12345678910',
        icon: 'iconname',
      ios: {
        alert: 'true',
        badge: true,
        sound: 'true'
      windows: {}

Thanks in advance!

Where do you actually store the icon you want to display?

I stored the icon all over the place.

I have the icon in the platform/android/res/

And inside res, in every single folder created by the ionic resources.

Also I have it in res://drawable/ because I use that folder for the local notificacion plugins.

I have it too in /resources/ etc…

Doesn’t it just work if you just store it in your assets folder under assets/my_icon and then do file://assets/my_icon? It’s a longshot, because I currently haven’t got an active setup for the local notification plugin.

That kind of string like file://assets/my_icon works on local notification plugin. I dont have any problem with local notification plugin, it works perfectly there.

But I want to make it work in Push Plugin.

Perhaps it’s best to alter you OP to reflect this, because that’s pretty important information :slight_smile: I guess you are aware off the fact this should only work on Android right? Not testing on an iOS device?

EDIT: sorry, just saw you only try to set it for Android.

Yes, I’m trying to make it work on Android :stuck_out_tongue:

1 Like

What version of Android are you testing on?


$ ionic resources

maybe your icons are not being generated it will help to generated icons.

Read This

I’m seeing several mentions about this on the plugins issue tracker, like this one:

@anonymuos1 forgive me being a bit pissy here but sweet merciful crap I have answered this question way too many times. As of Android 5.0 things now follow the Material guidelines which is to make the notification icon completely white. As you can see you are having problems on devices with Android 5+ which the exception of Samsung which does some screwy things with regards to the UI.

As I mention in the docs I linked to you, each pixel in the image you specify is changed to white except for the transparent ones. So I can only assume one of two things 1) you icon does not have transparent pixels or 2) you did not copy the icon into the drawables folder properly.

I think the OP is asking for a specific icon other then the apps icon. If this isn’t the case, you should indeed generate the icon first. Else it will just give you that cordova icon.

Android versoin: Android 7.1.2

I already did ionic resources. But nothing change.

I have a transparent background icon, and the rest is white. As I said, the icon works perfectly on the localnotifications.plugin.

I already read about the drawable folder, but which one? Where? My icon is already on every single folder that is called drawable, or inside assets, etc etc… :frowning:

whats your ionic version?

Your system information:

ordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.6
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed

have a look at this answer…it addresses the same problem you are facing.

Creating the folder that he says doesnt solve the problem :frowning:

That plugin that he says… Is it necessary?

you could always try…maybe that can sort out the issue.

Nothing seems to work…

Guys, what did you do to make it work in your apps?

Ok, I finally made it work!!

I was creating the wrong icons in the webpages, I was creating app icons instead of notification icons.

I just moved the folders generated by the webpage to platform/android/res/ and now its working, as simple as that…

Thank you all!

Great! Could you detail a bit more your solution…

1 Like