search

primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
9.84k stars 4.51k forks source link

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

Open alaindeurveilher opened 3 months ago

alaindeurveilher commented 3 months ago

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

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 commented 3 months ago

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 commented 1 month ago

Hi,

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

alaindeurveilher commented 1 month ago

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>