0

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 ?

3

If you're intending to use the Salesforce-hosted icons, you can use the VF page icons located at /apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg. Note the extra /apexpages/slds/latest at the beginning.

  • Thank you for your answer. I just updated with the path you provided and the 404 Not found error is gone but the icons still won't render. Any clue about that ? – Ombrelin Jun 6 at 14:53
-1

To change any SVG's color, refer the comment posted by Manish Menaria. A little hacky, but works. https://stackoverflow.com/a/53336754/4073774

You can use lightning:icon component to display any SLDS icon in ur LWC component. Refer the link below: https://developer.salesforce.com/docs/component-library/bundle/lightning:icon/example

For the list of the SLDS icons, refer the link below: https://lightningdesignsystem.com/icons/

  • Thank you for your answer. I tried the method you linked using an <img> tag to display the icon but I can't achieve it to work, it just renders a blank image.Any clue about that ? I tried tu use the lightning:icon component but I didn't find a way to change the icon's color while display the icon that way. – Ombrelin Jun 11 at 7:37

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.