Android notification icon appears as a grey square

[kputh]

Describe the bug The notification icon on Android 8, 9 and 10 is a grey square.

I believe this issue is tied to how notification icons work in Android 8+. According to the Material Design guide, they are supposed to be monochrome images.

I worked around this issue by using a white-on-transparent image for the notification icon, and having the server send a tint color along with the notification.

To Reproduce Steps to reproduce the behavior:

1. have an app with an opaque application icon
2. use an non-existent or opaque image as notification icon
3. close the app, or put it in the background
4. receive a notification with the app

Expected behavior There should be up-to-date documentation on using notification icons with this plugin. Also, there should be a way to set the default color for the icon.

Environment (please complete the following information):

• Developer OS and version: e.g. macOS Catalina 10.15.7
• Mobile OS and version: e.g. Android 8.0, 9.0 and 10.0 – all AVDs with Google APIs
• Cordova CLI version (cordova --version): 10.0.0
• Cocoapods version (pod --version): 1.9.1
• Xcode version (xcodebuild -version): Xcode 12.0.1

Package.json

{
  "dependencies": {
    "@angular/animations": "^9.1.9",
    "@angular/cli": "9.1.7",
    "@angular/common": "^9.1.9",
    "@angular/compiler": "^9.1.9",
    "@angular/compiler-cli": "^9.1.9",
    "@angular/core": "^9.1.9",
    "@angular/forms": "^9.1.9",
    "@angular/platform-browser": "^9.1.9",
    "@angular/platform-browser-dynamic": "^9.1.9",
    "@angular/platform-server": "^9.1.9",
    "@angular/router": "^9.1.9",
    "@borderless/base64": "^1.0.1",
    "@swimlane/ngx-datatable": "^17.0.0",
    "@types/cordova-plugin-background-mode": "0.0.16",
    "@types/cordova-plugin-insomnia": "^4.0.31",
    "@types/cordova-sqlite-storage": "^1.5.4",
    "angular4-carousel": "^3.1.8",
    "cordova": "^10.0.0",
    "cordova-android": "^9.0.0",
    "cordova-ios": "^6.1.1",
    "cordova-plugin-background-mode": "^0.7.3",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-inappbrowser": "^4.0.0",
    "cordova-plugin-insomnia": "git+https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.git",
    "cordova-sqlite-storage": "5.0.0",
    "cordova-support-android-plugin": "^1.0.2",
    "cordova-support-google-services": "^1.4.1",
    "core-js": "2.4.1",
    "electron-log": "^2.2.11",
    "electron-updater": "3.0.x",
    "electron-util": "0.14.x",
    "file-saver": "^1.3.3",
    "file-system": "^2.2.2",
    "geopoint": "^1.0.1",
    "hammerjs": "^2.0.8",
    "howler": "^2.0.13",
    "intl": "^1.2.5",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.15",
    "md-autocomplete": "0.0.1-alpha.1",
    "moment": "^2.19.3",
    "msal": "0.1.3",
    "ng2-auto-complete": "^0.12.0",
    "ng2-cordova-oauth": "0.0.8",
    "ng2-pdf-viewer": "3.0.8",
    "ng2-zoomable": "^0.1.1",
    "ngx-mydatepicker": "^2.1.3",
    "panzoom": "^4.0.0",
    "query-string": "^5.0.1",
    "rimraf": "^2.6.2",
    "rxjs": "^6.5.5",
    "socket.io-client": "^2.0.4",
    "sqlite3": "4.2.x",
    "tslib": "^1.9.0",
    "typescript": "3.8.3",
    "url-search-params-polyfill": "^8.1.0",
    "webpack-cli": "^3.1.2",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@ngtools/webpack": "9.x.x",
    "@types/fetch-mock": "^5.12.2",
    "@types/hammerjs": "^2.0.35",
    "@types/hellojs": "^1.16.0",
    "@types/jasmine": "^3.5.11",
    "@types/jwt-decode": "^2.2.1",
    "@types/lodash": "^4.14.151",
    "@types/node": "^12.12.54",
    "@types/query-string": "^5.0.1",
    "@types/socket.io-client": "^1.4.32",
    "@types/source-map": "0.5.0",
    "@types/sqlite3": "^3.1.1",
    "@types/tmp": "^0.0.33",
    "@types/webpack": "^4.0.0",
    "angular-router-loader": "^0.8.3",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^5.2.1",
    "codelyzer": "^5.0.1",
    "copy-webpack-plugin": "^5.1.1",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.5.0",
    "cordova-plugin-whitelist": "^1.3.4",
    "cpx": "^1.5.0",
    "csp-html-webpack-plugin": "^4.0.0",
    "css-loader": "^3.5.3",
    "edit-json-file": "^1.4.0",
    "electron": "5.x",
    "electron-builder": "22.2.x",
    "expose-loader": "^0.7.3",
    "fetch-mock": "^6.0.0",
    "file-loader": "^6.0.0",
    "hellojs": "^1.16.1",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^3.0.6",
    "http-server": "0.9.0",
    "istanbul-instrumenter-loader": "^2.0.0",
    "jasmine": "^3.6.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage": "1.1.1",
    "karma-electron": "6.3.x",
    "karma-intl-shim": "^1.0.3",
    "karma-jasmine": "^3.3.1",
    "karma-junit-reporter": "^1.2.0",
    "karma-mocha-reporter": "2.2.2",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "^4.0.2",
    "node-sass": "4.13.x",
    "pretty-data": "^0.40.0",
    "puppeteer": "^2.1.0",
    "raw-loader": "^1.0.0",
    "reflect-metadata": "^0.1.10",
    "sass-loader": "^8.0.2",
    "script-ext-html-webpack-plugin": "^2.1.4",
    "source-map-loader": "^1.0.0",
    "style-loader": "^1.2.1",
    "stylelint": "^8.1.1",
    "stylelint-config-standard": "^17.0.0",
    "tmp": "^0.0.33",
    "to-string-loader": "^1.1.6",
    "ts-mocks": "^0.2.2",
    "ts-node": "~8.3.0",
    "tslint": "^5.4.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.20.2",
    "webpack-merge": "^3.0.0",
    "xml2js": "^0.4.23"
  },
  "engines": {
    "node": ">= 12.13.0 < 13",
    "npm": ">= 6.12.0"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-file": {},
      "cordova-plugin-insomnia": {},
      "cordova-plugin-background-mode": {},
      "cordova-plugin-fcm-with-dependecy-updated": {
        "ANDROID_DEFAULT_NOTIFICATION_ICON": "@drawable/baseline_local_fire_department_white_18",
        "ANDROID_FCM_VERSION": "21.0.0",
        "ANDROID_FIREBASE_BOM_VERSION": "26.0.0",
        "ANDROID_GOOGLE_SERVICES_VERSION": "4.3.4",
        "ANDROID_GRADLE_TOOLS_VERSION": "4.1.0"
      }
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

[RidClick]

You must add the icon in your config.xml like

`

<platform name="android">
    <resource-file src="src/assets/icon/fcm_push_icon.png" target="app/src/main/res/mipmap/fcm_push_icon.png" />
    <resource-file src="src/assets/icon/fcm_push_icon.png" target="app/src/main/res/drawable/fcm_push_icon.png" />
    <resource-file src="src/assets/icon/push/mdpi/mdpi.png" target="app/src/main/res/drawable-mdpi/fcm_push_icon.png" />
    <resource-file src="src/assets/icon/push/hdpi/hdpi.png" target="app/src/main/res/drawable-hdpi/fcm_push_icon.png" />
    <resource-file src="src/assets/icon/push/xhdpi/xhdpi.png" target="app/src/main/res/drawable-xhdpi/fcm_push_icon.png" />
    <resource-file src="src/assets/icon/push/xxhdpi/xxhdpi.png" target="app/src/main/res/drawable-xxhdpi/fcm_push_icon.png" />
    <resource-file src="src/assets/icon/push/xxxhdpi/xxxhdpi.png" target="app/src/main/res/drawable-xxxhdpi/fcm_push_icon.png" />

`

[FrancescoPaiola]

it didn't solve the problem. I'm using the icons generated with command: ionic cordova resources android is that ok? is there any documentation about this fcm icons path?

[RidClick]

Greeatings The icons who's the plugin expect should be .png and with different sizes. I can't find now where I saw the docs about this but here is my example: In your assets folder you should have a icon folder were you should put a icon named fcm_push_icon.png sized 192x192px Then another folder called push were you should put the rest of icons mdpi.png - 24x24px hdpi.png - 36x36px xhdpi.png - 48x48px xxhdpi.png - 76x76px xxxhdpi.png - 96x96px After, like I told you in previous comment, in the config.xml link this icons with the android res folder. `

<resource-file src="src/assets/icon/fcm_push_icon.png" target="app/src/main/res/drawable/fcm_push_icon.png" />
<resource-file src="src/assets/icon/push/mdpi.png" target="app/src/main/res/drawable-mdpi/fcm_push_icon.png" />
<resource-file src="src/assets/icon/push/hdpi.png" target="app/src/main/res/drawable-hdpi/fcm_push_icon.png" />
<resource-file src="src/assets/icon/push/xhdpi.png" target="app/src/main/res/drawable-xhdpi/fcm_push_icon.png" />
<resource-file src="src/assets/icon/push/xxhdpi.png" target="app/src/main/res/drawable-xxhdpi/fcm_push_icon.png" />
<resource-file src="src/assets/icon/push/xxxhdpi.png" target="app/src/main/res/drawable-xxxhdpi/fcm_push_icon.png" />`

It can't be the the icons generated by the command cordova resources becouse this icons are for the application not for the notifications but you can use them to copy them in the folder that you have generated before.