6

I am developing an app and I need to add SLDS icon with custom color (i.e. green or blue) to the UI. Which is why I can't use <lightning-icon> component because you can override it style.

Thus I tried tu use a bare SLDS Svg with the folowing markup : 

<span class="slds-icon_container slds-icon-utility-comments">
      <svg xmlns="http://www.w3.org/2000/svg" style="fill: #3496ec" class="slds-icon slds-icon-text-default" aria-hidden="true">
           <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#comments"></use>
      </svg>
</span>

However the icon is not rendered and I have a 404 not found error in the console about the icon's link.

Any idea about that ?

Improve this question

1 Answer 1

Reset to default
12

Change "/assets" to "/_slds" in the use element.

<use xlink:href="/_slds/icons/standard-sprite/svg/symbols.svg#comments"></use>
Improve this answer
4
  • I just tested and it doesn't work in my case
    – Ombrelin
    Commented Feb 13, 2020 at 15:23
  • 3
    I can confirm this works in Winter 2020. My example: <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg#check"></use>
    – Mattisdada
    Commented Jun 24, 2020 at 5:22
  • This works with Edge
    – Cray Kao
    Commented Jan 4, 2021 at 4:38
  • Still working in Winter 2022
    – David Culbreth
    Commented Apr 29, 2022 at 17:26

You must log in to answer this question.

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