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`>
Improve this question
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
    Commented May 4, 2020 at 18:18

2 Answers 2

Reset to default
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.

Improve this answer
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
    Commented 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>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .