Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 2

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?

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

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

Avatar

Level 2
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>

Avatar

Community Advisor
for HTML it is valid but for jcr the svg node with reference will bot be valid. if you will check the error logs, then you may find this in logs.


Arun Patidar

Avatar

Level 2
ok thanks for clarifying, so does aem currently not support svg reference in jcr? should I only use regular svgs?