Icons not showing in CMS content

[ThijmenKort]

I am using the payment icons in a cms page. {{icon "payment/default/klarna" classes="inline-block" width=60 height=50}}

This is not working. On the frontend there is no html or svg visible. The payment icons are working in the phtml files so not sure what could be wrong. Other hericons are working fine in the cms pages.

[GrimLink]

@ThijmenKort could give a bit more information, on what version of Hyvä your using and which version of the icon pack your using?

To make sure everything is working as intended I check on a clean project using Hyvä with you input:

{{icon "payment/default/klarna" classes="inline-block" width=60 height=50}}

in the homepage content and I can see it working:

[ThijmenKort]

Hi @GrimLink , I am using Hyva 1.3.9, Magento 2.4.7-p2, icons-payment 1.2.2.

The icons worked before but suddenly stopped working. I don't know exactly when they stopped so cant say what made it broken. I've tried a lot of things and even restarting the servers dont't fix it.

[ThijmenKort]

Hi @GrimLink,

Any idea what could be the problem here? I noticed lucide icons isn't working too in the CMS. Both the normal HeroIcons and HeroIcons V2 are strangely working.

I did some more debugging but can't find any cause for this problem. The issue is both on local development and production environment. So it probably has something to do with the Magento installation but maybe you have a more specific idea what it could be.

[GrimLink]

@ThijmenKort sorry for the late reply, I have no idea, and have not yet had time to investigate the issue more deeply.

Only thing I can ask if you could test to see if you have the same issue with a clean Magento 2 install and if your also experiencing this with any other 3de party Hyvä icon pack, like this one, or is this issue only happing with this one.

[ThijmenKort]

@GrimLink i tried several packages. The following packages are working:

1. Heroicons V1 by Hyvä
2. Payment Icons by Hyvä
3. Hyvä Flags by JaJuMa

The following packages are not working:

1. LucideIcons by Siteation
2. Payment Icons by Siteation
3. Flag Icons by Siteation
4. Heroicons V2 by Thijs de Witt

So absolutely no clue what it could be. I haven't tested the clean setup yet because that requires some more work. Since you tested it on a clean install i expect it will work there.

[ThijmenKort]

Hi @GrimLink , i did some more digging. The only difference that i could find in the packages was the location of the di.xml. After forking this package and moving the etc/di.xml to etc/frontend/di.xml did fix it.

Any idea how this problem can be fixed? I guess you won't move the di.xml to /etc/frontend, right?

[GrimLink]

The movement was done to add the capability to use it inside the Admin CMS editor, Heroicons V1 by Hyvä also has the code for this in the global di.xml, the frontend/di.xml is used for different reasons. So the only exceptions are the other two you mention.

No idea why this movement works for you, but seeing it is related to the di, running a bin/magento setup:di:compile could have been the fix or could have told us more about why it is going wrong on your side.

[ThijmenKort]

bin/magento setup:di:compile is in our production deployment commands so that doesn't fix it. Running this local also won't fix it. I also see no error in the logs that could relate to this problem.

Are both the heroicons V1 and V2 exactly the same besides the icons? Because weirdly the V1 does work and V2 does not. I read the move for the di.xml was done because that made the preview work in the CMS editor. But i don't see any icon there so not sure if this behaviour is still working as it should.

[woutk88]

I've looked into this just now (because I've ran into this issue before, and again today with Heroicons2) and it seems I have found the cause:

The problem is indeed related to the scope/stage where the pathPrefixMapping argument(s) are defined. Setting the argument(s) on global scope (etc/di.xml) usually works and I can imagine that is preferred as it's cleaner than declaring it in both etc/frontend/di.xml and etc/adminhtml/di.xml), but once you define the argument anywhere on a more specific scope (which is loaded later on), it will overwrite the global scope and the global defined icons stop working. (In our case the Multisafepay compatibility module was the culprit, because it is setting it on frontend scope.)

Arguments on different stages—Configuration arguments are merged when they are declared on the same stage (Initial, Global, or Area-Specifc). If you declare new arguments on a higher stage, like Area-Specific, the arguments declared on the higher stage will replace the existing ones. — Source: https://developer.adobe.com/commerce/php/development/build/dependency-injection-file/

A quick fix is to also set the pathPrefixMapping argument of the "broken" packages in your project's app/code on the more specific scopes.

I suppose one way to prevent this "breaking" of icons in CMS content, is to set the argument(s) for both adminhtml and frontend scope in all icon extensions (where possible). And probably (also) adding some info about this to the SvgIcons page in the Hyvä docs would helpful. @GrimLink I'm happy to raise an issue somewhere if needed, but I'm just not sure where (hyva theme, icon pack(s), docs?) and about the best solution. Since you're working at Hyvä and you created multiple icon extensions, maybe you can straighten this out? (sorry 😅)

EDIT: Heroicons v1 keeps working because pathPrefixMapping is not set there on Hyva\Theme\ViewModel\SvgIcons in any di.xml. Instead iconPathPrefix is set (via di.xml) on the more specific HeroiconsSolid and HeroiconsOutline viewModels.

[GrimLink]

@woutk88 thanks you for your comprehensive explanation.

Based on your insights, I understand that splitting the di.xml file is a potential solution to address the issue. If this proves effective, I'm in favor of implementing it.

Regarding the Hyvä documentation, I'm happy to update the relevant section. I believe it's a valuable contribution that could benefit the community, even before reaching out to the broader Hyvä team. As a member of the Hyvä theme development team, I'm well-positioned to make this update.

[GrimLink]

Again thanks @woutk88 for the solution and @ThijmenKort for bring this to my attention. I have made issues for our other Hyvä Icon modules and will also be opening this issue on other repo's that I know of, including Heroicons v2.

[woutk88]

@GrimLink You're welcome and thank you for picking it up for the different sets/repos!

FYI, there's a minor typo (twice) in the release note: it states adminthtml instead of adminhtml. Not important at all, but just a heads up in case you'll copy the message for the other repos :wink: