1

I want to create a reusable icon as a lightning web component. I found the following documentation:

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_svg_in_component

I created a blank lwc and a added the SVG file with the same name as the component into the directory.

How can I use this as an icon? My file strucure is:

 _
|
|customWarningIcon.html
|customWarningIcon.js
|customWarningIcon.js-meta.xml
|customWarningIcon.svg
|_

How can I use this icon now in other lightning web components?

`<lightning-icon iconName=?????></lightning-icon`>
1
  • The answers provide a way to use a custom icon as a component, and that's fine, but I want to use a custom icon on the utility bar, and cannot figure out how to do that. The Utility bar API SetPanelHeaderIcon appears to only accept the name of a pre-existing (built-in) utility icon.
    – kamezaburo
    May 4, 2020 at 18:18

2 Answers 2

1

You can't. The svg resource of a component is used to show a custom icon in Community Builder and App Builder. Further, lightning-icon only provides access to standard SLDS icons, not custom icons. You can Instead put the svg directly in to a component's template, or use a static resource to load the svg, as outlined in that same document that you've linked.

1
  • The tip in the referenced page is a bit misleading as it implies a way to use an SVG whilst not explicitly stating it is ONLY for the community/app builder.
    – Phil W
    Nov 24, 2019 at 10:29
1

You could either paste your SVG's code directly in the customWarningIcon.html template or import it as a static resource and link to it from within the template. (Docs)

Then where ever you need this icon in other components you could use the following:

<c-custom-warning-icon></c-custom-warning-icon>

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.