I'm trying to swap out the icon image used in lightning:buttonIcon on-click to one that's in a static resource. However, this is removing the SVG icon when the button is clicked.


<lightning:buttonIcon aura:id="previewIcon" iconName="utility:preview" class="show-password__icon" onclick="{!c.togglePassword}" alternativeText="Show password" />


component.find("previewIcon").set("v.iconName", "{!$Resource.FutureStatePortalV1 + '/assets/style/images/SVG/previde-hide.svg'}");

Is there a different way to reference a static resource in this manner?


Unfortunately, you can't. It's simply not supported at this time. The only supported format is "category:name", where category is a value like "action", and name is a value like "upload". If you want to include your own SVG elements, you can go for it, but you'll need to use something like the SVG Helper. There's no native support for SVG/USE combinations in Lightning as of yet, because of the security risks involved.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.