[Android] - No icons could drop the space

[jorgeMoovein]

When not setting icons in the MenuAction, could eliminate the space for them.
Don't know how to do if 1 MenuAction has icon and the other don't.

[dyazincahya]

Hello @NathanWalker

https://plugins.nstudio.io/plugins/menu#properties

{
    id: 4,
    name: 'Protocols',
    icon: 'square.2.layers.3d',
    children: [
      { id: 41, name: 'Add Protocol', icon: 'plus' },
    ],
  }

I'd also like to know where the square.2.layers.3d icon comes from, as the documentation doesn't include it. Where can I find the names of the library's built-in icons that I can use?

[jorgeMoovein]

Hello @dyazincahya

Its the reference of SystemIcon i think. In this case you can check iOS - SFSymbols:
https://developer.apple.com/sf-symbols/

[dyazincahya]

Hello @dyazincahya

Its the reference of SystemIcon i think. In this case you can check iOS - SFSymbols:
https://developer.apple.com/sf-symbols/

Ah thank you for the information

[dyazincahya]

Hello @dyazincahya

Its the reference of SystemIcon i think. In this case you can check iOS - SFSymbols: https://developer.apple.com/sf-symbols/

Hmm, I forgot,,, unfortunately, I’m using Windows, so I can’t install the SF Symbols DMG file on my laptop :(

But I found this: https://github.com/andrewtavis/sf-symbols-online / https://hotpot.ai/free-icons ,,, Even though it's not up to date, at least I can see the icon names available on SF symbols

[dyazincahya]

In node_modules\@nstudio\nativescript-menu\platforms\android\java\org\nativescript\menu\GlassAnchoredMenuController.java at line 1181-1213, I found an interesting code 😺

private String resolveIconGlyph(String icon) {
        if (TextUtils.isEmpty(icon)) {
            return "";
        }

        switch (icon) {
            case "plus":
            case "add":
                return "+";
            case "camera":
                return "◉";
            case "photo":
            case "image":
                return "▦";
            case "folder":
                return "▤";
            case "cloud":
                return "☁";
            case "square.and.pencil":
            case "edit":
                return "✎";
            case "square.2.layers.3d":
            case "layers":
                return "◫";
            case "circle.dotted":
                return "◌";
            default:
                if (icon.length() == 1) {
                    return icon;
                }
                return "•";
        }
    }

[NathanWalker]

Thanks @jorgeMoovein yes indeed @dyazincahya those are SF Symbols on iOS - can use any of those.

For Android, you can use those "common ones" from resolveIconGlyph but the most control comes from adding your own resources. For example, see these attached which are used in the demo app in this repo (you can create as many of these as needed for your cases). They can be added to App_Resources/Android/src/main/res/drawable. I'll add a note to docs about this.

folder.xml
cloud.xml
circle_dotted.xml
camera.xml