Menu Breadcrumbs: Inline SVG in the label as HTML is not rendered

[alaindeurveilher]

Describe the bug

I want to define an inline SVG icon in a menu item for my breadcrumbs, but the icon is not rendered.

All the other HTML elements are rendered Except the svg.

Environment

Angular 17

Reproducer

No response

Angular version

17.3.0

PrimeNG version

17.12.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.0

Browser(s)

Chrome

Steps to reproduce the behavior

• Create a standalone component
• Add the BreadcrumbModule module
• define a home menu item as such
  • no icon, only a label
  • escape: false
  • label as: <div class="flex gap-2"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">...</svg> Home</div>
• define an empty list: protected items = [];
• display in the template: <p-breadcrumb class="max-w-full" [model]="items" [home]="home" />

Current behaviour:
Only the text is displayed, and the generated HTML is as followed:

<a class="p-menuitem-link" href="" target="undefined" tabindex="0"><!--bindings={}--><homeicon class="p-element p-icon-wrapper" ng-reflect-style-class="p-menuitem-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon p-menuitem-icon"><g clip-path="url(#pn_id_7)"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4175 6.79971C13.2874 6.80029 13.1608 6.75807 13.057 6.67955L12.4162 6.19913V12.6073C12.4141 12.7659 12.3502 12.9176 12.2379 13.0298C12.1257 13.142 11.9741 13.206 11.8154 13.208H8.61206C8.61179 13.208 8.61151 13.208 8.61123 13.2081C8.61095 13.208 8.61068 13.208 8.6104 13.208H5.41076C5.40952 13.208 5.40829 13.2081 5.40705 13.2081C5.40581 13.2081 5.40458 13.208 5.40334 13.208H2.20287C2.04418 13.206 1.89257 13.142 1.78035 13.0298C1.66813 12.9176 1.60416 12.7659 1.60209 12.6073V6.19914L0.961256 6.67955C0.833786 6.77515 0.673559 6.8162 0.515823 6.79367C0.358086 6.77114 0.215762 6.68686 0.120159 6.55939C0.0245566 6.43192 -0.0164931 6.2717 0.00604063 6.11396C0.0285744 5.95622 0.112846 5.8139 0.240316 5.7183L1.83796 4.52007L1.84689 4.51337L6.64868 0.912027C6.75267 0.834032 6.87915 0.79187 7.00915 0.79187C7.13914 0.79187 7.26562 0.834032 7.36962 0.912027L12.1719 4.51372L12.1799 4.51971L13.778 5.7183C13.8943 5.81278 13.9711 5.94732 13.9934 6.09553C14.0156 6.24373 13.9816 6.39489 13.8981 6.51934C13.8471 6.60184 13.7766 6.67054 13.6928 6.71942C13.609 6.76831 13.5144 6.79587 13.4175 6.79971ZM6.00783 12.0065H8.01045V7.60074H6.00783V12.0065ZM9.21201 12.0065V6.99995C9.20994 6.84126 9.14598 6.68965 9.03375 6.57743C8.92153 6.46521 8.76992 6.40124 8.61123 6.39917H5.40705C5.24836 6.40124 5.09675 6.46521 4.98453 6.57743C4.8723 6.68965 4.80834 6.84126 4.80627 6.99995V12.0065H2.80366V5.29836L7.00915 2.14564L11.2146 5.29836V12.0065H9.21201Z" fill="currentColor"></path></g><defs><clipPath id="url(#pn_id_7)"><rect width="14" height="14" fill="white"></rect></clipPath></defs></svg></homeicon><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="p-menuitem-text">
  <div class="flex gap-2">

  Home
</div></span><!--bindings={
  "ng-reflect-ng-if-else": "[object Object]"
}--><!--container--><!--ng-container--><!--bindings={
  "ng-reflect-ng-if": "\n  <div class=\"flex gap-2\">\n  "
}--></a>

Expected behavior

It is expected to display the SVG icon followed by the Home title.

[alaindeurveilher]

The motivation of this is to customize the home of the Breadcrumbs with a custom icon (in my case a brand icon of my company), and not use the of the PrimeNG Breadcrumbs component. I though I would be able to manage that with label as HTML but when icon is not set then the fallback HomeIcon is displayed which is not the desirable behaviour.

[mehmetcetin01140]

Hi,

Could you please share a stackblitz example so we can identify the issue clearly?

[alaindeurveilher]

Hi, there it is: https://stackblitz.com/edit/angular-tv1w2t?file=src%2Fmain.ts

And if you inspect the rendered home element, you will notice that the svg is completely ignored and replaced by a series of white space characters:

<span class="p-menuitem-text">
      <div class="flex gap-1">
        
          
          
            
              
            
            
            
          
        
        <span>Brand</span>
      </div></span>

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[alaindeurveilher]

I tried with the latest versions of Angular and PrimeNG, and the issue is still present:
https://stackblitz.com/edit/angular-8wtkmu

Angular: 18.2.5
PrimeNG: 17.18.10

[github-actions]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨