Ionic-framework: bug: menu-sharp.svg 404 not found (ionic/core no ionicons)

[peterpeterparker]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
I am using @ionic/core without the ionicons (because we can't deploy a couple of hundred icons each time an app is created with our starter kit in which Ionic is use).

Instead, we are referencing selected ionicons, we have downloaded and added to the projects, using the src attributes of the ion-icons component.

Doing so, we are also using the ion-menu-button as following to provide our icon:

<ion-menu-button>
  <ion-icon src="./assets/icons/ionicons/menu.svg"></ion-icon>
</ion-menu-button>

This indeed work as expected to the exception that I can find the following error in the console output:

GET https://.../svg/menu-sharp.svg 404 (Not Found)

The reason behind this issue is the fact that the provided slot of the ion-menu-button assume that all ionicons are bundled with the app.

Expected behavior:
No loading of the default icon if an element is provided for the default slot.

Steps to reproduce:

1. Go to https://beta.deckdeckgo.io/xendromekail/presentation-nov-5-2020-21-04-46/
2. Open the console

This deck has been packaged with our kit: https://github.com/deckgo/studio-kit

Related code:

ion-menu-button:

<slot>
    <ion-icon part="icon" icon={menuIcon} mode={mode} lazy={false} aria-hidden="true"></ion-icon>
</slot>

where menuIcon is

const menuIcon = config.get('menuIcon', mode === 'ios' ? 'menu-outline' : 'menu-sharp');

Suggestion solution:

Not sure it would work but maybe the solution would be?

const element = this.el.querySelector(":scope > [slot]");

if (element) {
   this.menuIcon =...
}

<slot>
{this.menuIcon ? <ion-icon.../> : undefined
</slot>

[liamdebeasi]

Thanks for the issue. If we added the ability to use a custom ion-icon for ion-menu-button would that work?

It would be something like:

<ion-menu-button icon="./assets/icons/ionicons/menu.svg"></ion-menu-button>

Internally we would check for the icon prop and use that in place of menu-outline or menu-sharp.

[EinfachHans]

Changing the Icon for a single MenuButton is also a good feature for the future, but as you wrote here @peterpeterparker :

const menuIcon = config.get('menuIcon', mode === 'ios' ? 'menu-outline' : 'menu-sharp');

It should work for all Menu Buttons if you set menuIcon: "./assets/icons/ionicons/menu.svg" in the Ionic Config?

Anyway i created a PR for changing a single Icon as this is something i can need as well: #22436

[liamdebeasi]

_Today I learned that this config option existed_ 🤔

@peterpeterparker can you give the config option a shot first and let me know how that goes?

[peterpeterparker]

Thx @EinfachHans for the suggestion, unfortunately the menuIcon configuration does not work as it is use to map the property of the default ion-icon of the slot aka it only supports icon by names.

@liamdebeasi sure your suggestion would definitely work! I am totally fine with it but if you rather like another one now knowing that there is a global configuration, I am not against neither too. As long as the error disappear, I am all in ;)

[EinfachHans]

@peterpeterparker the menuIcon is set in the menu Button as <ion-icon icon={menuIcon} right? I think it "should" work as the Docs of the IonIcon says setting the icon via icon Property will look if it detects a url 🤔

https://github.com/ionic-team/ionicons/blob/a30dfb28863b0ad4230e2d9d4f23967f6c561c9c/src/components/icon/icon.tsx#L64-L69

If you say it doesn't work. maybe there is an error

[liamdebeasi]

Hmm the icon prop should accept either an icon name or a file path. Can you provide a code example of how you are going about doing this?

[peterpeterparker]

probably had a typo, sorry for the noise and I learned something, did not knew icon works with both.

deleted everything including build dir, retyped every words and the menuIcon in the configuration did the trick, seems to work (at least locally)

thx a lot for the support @EinfachHans @liamdebeasi, all good then

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.