[Question] Menu icons - is there an option to enable / disable them && is using for FontAwesome icons possible

[yafp]

I noticed you added with #43 support for menu icons.

so far i haven't added any icon to my menu - which results in empty space. See the attached screenshot.

Is there an option to enable or disable the menu icons?

Additional question:
Have you ever tried using fontawesome as a source for electron menu icons?

[AlexTorresDev]

The icon view is based on the new Microsoft Edge (Chromium), so you cannot remove the extra space left on the left side of the menu item. If you use a checkbox item, the icon is check.

It is not possible to add fontawesome icons, as the variable for icon that provides electron is used. In any case, I'll check it out and be reporting the progress right here.

[yafp]

It is not possible to add fontawesome icons, as the variable for icon that provides electron is used.

Thanks - so i was guessing right.

Having access to fontawesome would it make much easier to fill all those icons needed for a complex menu ... but i understand if that's not the project target.

In any case, I'll check it out and be reporting the progress right here.

So should i keep the issue open as you consider supporting it?

[janvorisek]

I haven't tried it yet but you should be able to use fontawesome icons directly using their SVGs.

See: https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

[yafp]

Hi @janvorisek

I haven't tried it yet but you should be able to use fontawesome icons directly using their SVGs.

Seems like it doesnt work.

I did try with a classic image like in the example - that works

icon: __dirname + '/app/img/icon/icon.png',

Then i tried applying that to an fontawesome svg like that

icon: __dirname + '/node_modules/@fortawesome/fontawesome-free/svgs/regular/address-book.svg',

This throws no error, but the entire submenu entry is missing

So while my file menu containes

• Settings
• Separator
• Exit

it then only showed

• Separator
• Exit

[janvorisek]

@yafp That's strange. Can you check if SVGs are loading correctly in your app (webpack/rollup config)? It's still strange that the item is missing. I'd expect an error/empty image instead.

[janvorisek]

@yafp Converting the icons you want into PNGs and including them in your app may be possible too. Brutal but could be a temporary solution 😄

[yafp]

Oh, i have to correct myself.

Not only the 1 item is missing - instead it seems like my app is falling back to the electron default menu entries.

[janvorisek]

I have to correct myself as well. I investigated electron menu a bit and the icon accepts NativeImage which cant be SVG according to the electron docs.

My current idea is to load the SVGs in my app main.ts using webpack and manually converting each into a NativeImage which can then be supplied directly to the MenuItem item prop. I'll share some sample code if I am successful 😄. I am also curious for any simpler solutions/examples.

[yafp]

I have to correct myself as well. I investigated electron menu a bit and the icon accepts NativeImage which cant be SVG according to the electron docs.

Good catch, thanks @janvorisek

for the sake of completeness

While trying to use the .svg my error reporting using Sentry game me the following:

TypeError
Error processing argument at index 1, conversion failure from /home/foo/bar/app/img/address-book.svg

Array.forEach
Called from: electron/js2c/browser_init.js in Function../lib/browser/api/menu.js.Menu.buildFromTemplate
Array.forEach
Called from: electron/js2c/browser_init.js in Function../lib/browser/api/menu.js.Menu.buildFromTemplate
app:///main.js in createMenu at line 239:21

While i noticed no error output in the console.

No idea if it's possible to handle that better to prevent falling back to the default menu.

[yafp]

to sum it up:

• Using FontAwesome is not possible
• Menu Icons (introduced with Menu Item Icons #43) can't be disabled