Problem/Motivation

I am having a repeated problem when using the Navigation module on local development site; in particular, the rendering of the SVG icons.

I have nother other local SVG-rendering issues with any other SVG-related modules; this is definitely specific to the Navignation module and therefore to Ivon API.

Furthemore, I shoild like to point out that I suspect that this is spcifically a Windows-related issue.

I develop many Drupal sites using Laragon (https://github.com/leokhoa/laragon) on Windows 11 (currently Insiders 25H2)

Full system

Drupal 11.3.5
Apache/2.4.62 (Win64) OpenSSL/3.0.15 mod_fcgid/2.3.9
PHP v8.4.12
PHP Memory limit: 512M
MySQL 8.4.3
PHP Caching module: OpCache

Illustrated

The screenshot below show Drupal CMS 2.0 and another of my sites on local DEV.
As you can see the SVG icons do not render...

svg-icons-not-rendering-on-local-dev

It isn't that do not render, they are actually not present in the DOM...

PROD markup

<button aria-expanded="false" aria-controls="navigation-link-navigationcreate" data-toolbar-popover-control=""
  data-has-safe-triangle="" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Cr"
  class="toolbar-button toolbar-button--icon--navigation-create toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control"
  data-once="safe-triangle" style="--safe-triangle-cursor-x: 71px; --safe-triangle-cursor-y: 29px;">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="toolbar-button__icon" aria-hidden="true">
    <path
      d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96452 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7662 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25ZM16.5 12C16.5 12.1989 16.421 12.3897 16.2803 12.5303C16.1397 12.671 15.9489 12.75 15.75 12.75H12.75V15.75C12.75 15.9489 12.671 16.1397 12.5303 16.2803C12.3897 16.421 12.1989 16.5 12 16.5C11.8011 16.5 11.6103 16.421 11.4697 16.2803C11.329 16.1397 11.25 15.9489 11.25 15.75V12.75H8.25C8.05109 12.75 7.86033 12.671 7.71967 12.5303C7.57902 12.3897 7.5 12.1989 7.5 12C7.5 11.8011 7.57902 11.6103 7.71967 11.4697C7.86033 11.329 8.05109 11.25 8.25 11.25H11.25V8.25C11.25 8.05109 11.329 7.86032 11.4697 7.71967C11.6103 7.57902 11.8011 7.5 12 7.5C12.1989 7.5 12.3897 7.57902 12.5303 7.71967C12.671 7.86032 12.75 8.05109 12.75 8.25V11.25H15.75C15.9489 11.25 16.1397 11.329 16.2803 11.4697C16.421 11.6103 16.5 11.8011 16.5 12Z"
      fill="currentColor"></path>
  </svg>
  <span data-toolbar-action="" class="visually-hidden">Extend</span>
  <span class="toolbar-button__label" data-toolbar-text="">Create</span>
  <svg viewBox="0 0 256 256" class="toolbar-button__chevron" width="16" height="16" aria-hidden="true">
    <path
      d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z">
    </path>
  </svg>
  <div data-safe-triangle=""></div>
</button>

Local DEV markup

<button aria-expanded="true" aria-controls="navigation-link-navigationcreate" data-toolbar-popover-control=""
  data-has-safe-triangle="" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Cr"
  class="toolbar-button toolbar-button--icon--navigation-create toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control"
  data-once="safe-triangle" style="--safe-triangle-cursor-x: 51px; --safe-triangle-cursor-y: 36px;">
  <span data-toolbar-action="" class="visually-hidden">Collapse</span>
  <span class="toolbar-button__label" data-toolbar-text="">Create</span>
  <div data-safe-triangle=""></div>
</button>

Simply not there!

Environment issue?

I say not.
I have done some pretty exhaustive testing/comparisons between the DEV and PROD environmnent ot investigate possible culprits such PHP exentions liek dom andsimple-xml and it really isn't anything like that - you eenvironments are identical and so are the Drupal codebases and database; it's somethign to do with

The only difference that I can identify is that my local lib-xml is 2.11.9 and the PROD is 2.10.2.

My gut feeling after plenty of experimentation guided by Claude is that this is somethiing to do with Icon API and Windows filing systme but I am at the end of the skill set to dig deeper.

Has anyone here involved in the Core Navigation / Icon API Team able to offer any guidedname please?

It is possible that this issue is related: https://www.drupal.org/project/ui_icons/issues/3568312

CommentFileSizeAuthor
svg-icons-not-rendering-on-local-dev.png111.82 KBsirclickalot

Issue fork drupal-3579927

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

sirclickalot created an issue. See original summary.

sirclickalot’s picture

sirclickalot
Primary language English
Location Somerset
commented
Issue summary: View changes

sapnil_biswas made their first commit to this issue’s fork.

sapnil_biswas opened merge request !15134

sirclickalot’s picture

sirclickalot
Primary language English
Location Somerset
commented

@sapnil_biswa

Outstanding work!

I can confirm that the patch from MR:15134 completely solves the problem across all my local DEV sites.

Thank you

sapnil_biswas’s picture

sapnil_biswas commented

@sirclickalot
Thank you so much for the kind words and for taking the time to test the patch!

I’m really glad to hear that it’s working well across your local DEV environments. Your confirmation means a lot and gives me confidence in the fix.

Please feel free to share any further feedback or suggestions if you come across anything else — I’d be happy to improve it further.

Thanks again!

cilefen’s picture

cilefen commented

See the AI-Generated Content policy, as there are signs some contributions here were generated using AI.

sapnil_biswas’s picture

sapnil_biswas commented
Status: Active » Needs review

Thanks @sirclickalot for testing and confirming the fix, really appreciate it!

Marking this as needs review.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Left comments on the MR

But going to go ahead and just say we shouldn't be posting straight AI solutions. You're a new user so not knocking it but all these pure AI solutions are causing massive community frustration.

Curious is there a camp or training thats encouraging this?

sapnil_biswas closed merge request !15134

sapnil_biswas opened merge request !15385

sapnil_biswas’s picture

sapnil_biswas commented
Status: Needs work » Needs review

Sorry for all the previous noises I have closed that MR and created a new one with my own understanding please let me know if there are any shortcomings or require any changes

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Appears to be the same test as before

sapnil_biswas’s picture

sapnil_biswas commented
Status: Needs work » Needs review

replaced it with a SvgExtractor regression test that exercises the actual icon-loading flow with a Windows-style local SVG path, please guide me if there is anything i misunderstood or requires a follow up

smustgrave’s picture

smustgrave commented

I’m sorry I can’t keep coming back to this ticket so going to leave for others. I don’t think the test is correct or following how we do tests. If no one gets to it I’ll look in a few months

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Actually I can kick back because the summary is incomplete. Please stop with the AI test too. I offered a hint in the MR.

smustgrave’s picture

smustgrave commented

I pinged the icon manager to hopefully avoid more AI churn

sapnil_biswas’s picture

sapnil_biswas commented

Thank you, sir, for your guidance. I will try working on it and meet the Drupal standards.

smustgrave opened merge request !15388

smustgrave’s picture

smustgrave commented
Component: navigation.module » other

Pushed an alternative solution to handle URLs like

\\var\\www\\html\\core\\modules\\system\\tests\\modules\\icon_test\\icons\\flat\\foo.svg

If the issue is it starts with C:\\ that works without any fix.

smustgrave’s picture

smustgrave commented
Issue tags: +Needs issue summary update
mogtofu33’s picture

mogtofu33 commented

I do not currently have a windows to test, but I think the issue could be from getPathName in core/lib/Drupal/Core/Theme/Icon/IconFinder.php, there is an old PHP documentation notice.

What could be useful is to debug the discovery result on Windows, with icon_test enabled and in processDefinition, dump at the end the result of the $definition variable (With ui_icons installed and enable ui_icons_library).

Then try to use getRealPath instead of getPathName in IconFinder.php to see.

For example on Linux with icon_test enable, on of the pack discovery is:

array:11 [
  "enabled" => true
  "label" => [...]
  "extractor" => "svg"
  "config" => [...]
  "settings" => array:1 [
    "size" => array:2 [
      "title" => "Size"
      "type" => "integer"
    ]
  ]
  "template" => """[...]"""
  "provider" => "icon_test"
  "id" => "test_svg"
  "relative_path" => "core/modules/system/tests/modules/icon_test"
  "absolute_path" => "/var/www/html/web/core/modules/system/tests/modules/icon_test"
  "icons" => array:12 [
    "test_svg:64x64" => array:3 [
      "absolute_path" => "/var/www/html/web/core/modules/system/tests/modules/icon_test/icons/flat/64x64.svg"
      "source" => "/core/modules/system/tests/modules/icon_test/icons/flat/64x64.svg"
      "group" => null
    ]
    [...]
  ]
]