Coral 3 Select dropdown doesn't render icon when using SVG reference | Community
Skip to main content
March 17, 2021
Solved

Coral 3 Select dropdown doesn't render icon when using SVG reference

  • March 17, 2021
  • 1 reply
  • 1116 views

Hi, I'm using a select dropdown menu and I need to render an icon and text for each option.

When I use a SVG reference the icon is not shown in the dialog

<selectIcon jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" fieldLabel="Select icon" name="./selectIcon"> <items jcr:primaryType="nt:unstructured"> <default jcr:primaryType="nt:unstructured" text="No icon" value="null"/> <icona1 jcr:primaryType="nt:unstructured" icon="/content/dam/project/filename.svg#reference" text="text" value="/content/dam/project/filename.svg#reference"/> <icona2 jcr:primaryType="nt:unstructured" icon="/content/dam/project/filename.svg#reference" text="text" value="/content/dam/project/filename.svg#reference"/> </items> </selectIcon>

 

If I try to render a file that doesn't use the #reference, the icon is shown in the dropdown in the dialog.

 

Any advice?

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

Hi,

I would suggest checking error logs. It might be possible that with #reference the node is not able to be resolved in AEM because /content/dam/project/filename.svg#referenc is not a valid node in AEM.

 

1 reply

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
March 18, 2021

Hi,

I would suggest checking error logs. It might be possible that with #reference the node is not able to be resolved in AEM because /content/dam/project/filename.svg#referenc is not a valid node in AEM.

 

Arun Patidar
rafcapAuthor
March 19, 2021
Hi, the svg is valid because I can see it on the page when I write it in the HTML: <svg class="icon xxl" data-sly-test="${properties.selectIcon!='null'}"> <use xlink:href="${properties.selectIcon}"></use> </svg>