Finally I've got the solution for this issue.
This issue occurs only when the app is not at all running. (neither in the background nor in the foreground). When the app runs on either foreground or background the notification icon is displayed properly.(not the white square)
So what we've to set is the same configuration for notification icon in Backend APIs as that of Frontend.
In the frontend we've used React Native and for push notification we've used react-native-fcm npm package.
FCM.on("notification", notif => {
FCM.presentLocalNotification({
body: notif.fcm.body,
title: notif.fcm.title,
big_text: notif.fcm.body,
priority: "high",
large_icon: "notification_icon", // notification icon
icon: "notification_icon",
show_in_foreground: true,
color: '#8bc34b',
vibrate: 300,
lights: true,
status: notif.status
});
});
We've used fcm-push npm package using Node.js as a backend for push notification and set the payload structure as follows.
{
to: '/topics/user', // required
data: {
id:212,
message: 'test message',
title: 'test title'
},
notification: {
title: 'test title',
body: 'test message',
icon : 'notification_icon', // same name as mentioned in the front end
color : '#8bc34b',
click_action : "BROADCAST"
}
}
What it basically searches for the notification_icon image stored locally in our Android system.