DrawIO Icon does not work in KDE after installation with AppImager

[Zesko]

Describe the bug

I installed DrawIO latest version with AppImager for Manjaro KDE. KDE menu shows the correct icon of DrawIO.
But I opened it that shows the Xorg icon like default icon in KDE taskbar panel, not drawio's icon.

To Reproduce
Steps to reproduce the behavior:

1. Install the latest version of drawio with AppImager in KDE (latest version)
2. Open drawio app
3. See the wrong icon in KDE taskbar and window titlebar too

Expected behavior
The drawio's icon should be correct in KDE taskbar and titlebar.

Screenshots

draw.io version (In the Help->About menu of the draw.io editor):

• draw.io version 14.6.13 (Latest version)

Desktop (please complete the following information):

• OS: Manjaro KDE latest version and stable branch

[zaroth]

This is still happening in the Linux build (Arch Linux in my case), app version 16.1.2. I'm not sure why this issue got closed? Is it a duplicate? From what I can tell it's not a packaging error.

[davidjgraph]

We closed because we have no solution. We can re-open and have no solution if preferred :)

[Zesko]

It has the issue with only installation with AppImager .
But install drawio-desktop-bin 16.1.2 from AUR that it has no issue.

[Zesko]

We closed because we have no solution. We can re-open and have no solution if preferred :)

Create drawio.png with 32x32 size should be in the directory $HOME/.local/share/icons/hicolor/32x32/apps/

and

Create drawio.png with 48x48 size in $HOME/.local/share/icons/hicolor/48x48/apps/.

and

Create drawio.desktop in the directory $HOME/.local/share/applications/.

[Desktop Entry]
Categories=Graphics;
Comment=diagrams.net desktop
Exec=/[PATH]/drawio %U
Icon=drawio
Name=drawio
NoDisplay=false
Type=Application

[zaroth]

@davidjgraph
For me, closing the issue means either that the issue is fixed or that the authors don't think it needs to be fixed (not a bug, so working as intended). That's why I was surprised to see it closed.

@Zesko
I have it installed via drawio-desktop-bin from AUR (Arch). And as you noted, it already has the proper .desktop file and icon files in the right paths:

/usr/share/applications/drawio.desktop

[Desktop Entry]
Name=drawio
Exec=/opt/drawio/drawio %U
Terminal=false
Type=Application
Icon=drawio
StartupWMClass=drawio
Comment=diagrams.net desktop
MimeType=application/vnd.jgraph.mxfile;application/vnd.visio;
Categories=Graphics;

And both the .desktop entry in the menus and taskbar show the correct icon:

However, having the correct .desktop file doesn't result in appropriate behavior after the app is launched - that's why I wrote in my comment earlier that I don't think the problem lies in packaging. It's best illustrated with a video:

How draw.io/diagrams.net desktop currently behaves (version 16.1.2)

drawio-wrong-behavior.mp4

As we can see, there are two problems here, probably related to each other:

1. Despite initially having the correct icon in the pinned taskbar icon, soon after launching, the draw.io app "forgets" it should have the icon and gets a generic X11 one instead.
2. This behavior (spawning a child process? Something else, possibly Electron related?) also prevents KDE from realizing that the launched app is linked to the taskbar icon, essentially duplicating taskbar icons for draw.io after launching the program.

How application should behave (another Electron app, Logseq)

logseq-correct-behavior.mp4

As I wrote, I thought the behavior might be related to some of Electron's quirks, so I found an Electron app who is doing this right - Logseq, a great PKM tool. As we can see here, the app both keeps its proper icon after launch and lets KDE associate its window with its launcher icon.

Now if only I knew enough about Electron and JS to dive into code of both Logseq desktop and draw.io desktop to compare what the first is doing right, I could probably write a PR for this issue - but sadly I don't. This could be a helpful starting point for someone else, though.

[zaroth]

After digging in a bit more, I found that drawio is using electron-builder for its electron packaging needs. And it seems to also be already providing path to the icons for the Linux build.

I tested one other popular app from github, also built using electron-builder and it seemed to have no issues. I will see what they're doing differently and report back.

[zaroth]

I'm happy to report that I successfully solved this issue! All it took was adding a single line to options in src/main/webapp/electron.js, line 84:

icon: `${__dirname}/images/drawlogo256.png`,

From what I understood, the problem is that Linux binaries don't have a special place to put their icon in (unlike Mac or Win), so specifying the icon in code is required for it to work. Adding this parameter changed the draw.io behavior to the correct one, fixing both the empty icon issue and the taskbar pinned icon matching issue:

drawio-correct-behavior.mp4

I linked drawlogo256.png because that was AFAIK the highest resolution logo available from within electron app, but obviously if it's not enough, a higher resolution file could be put into the drawio repo and linked (from what I've seen, in drawio-desktop repo the highest resolution icon has 1024x1024).

I'll submit a PR shortly with this change.

Huge thanks to Timosh from Electron Discord channel who helped me figure out the cause of the issue.

[davidjgraph]

Nice, thanks for looking.