1

icon does not appear on page

<span class="slds-icon_container slds-icon-doctype-xml" title="Description of icon when needed">
      <svg class="slds-icon" aria-hidden="true">
        <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#xml"></use>
      </svg>
      <span class="slds-assistive-text">Description of icon when needed</span>
    </span>

enter image description here

5

added based on comments:

SVG is used only for the icons not available in standard lightning icons. All these icons can be used in lightning-icon. For the icons which are not available as standard in lightning design system, you need use option-2/3 below (through SVG - but it will be quite rare that you need something not already available in lightning)


For using icons, below are the options preference wise ordered:

1. Use lightning-icon

<template>
    <lightning-icon icon-name="action:approval" alternative-text="Approved" ></lightning-icon>
    <lightning-icon icon-name="doctype:audio" alternative-text="Audio file" ></lightning-icon>
    <lightning-icon icon-name="standard:event" alternative-text="Event" ></lightning-icon>
    <lightning-icon icon-name="utility:connected_apps" alternative-text="Connected" ></lightning-icon>
    <lightning-icon icon-name="utility:warning" alternative-text="Warning!" variant="warning"></lightning-icon>
    <lightning-icon icon-name="utility:error" alternative-text="Error!" variant="error"></lightning-icon>
    <lightning-icon icon-name="utility:image" alternative-text="Utility image" ></lightning-icon>
    <lightning-icon icon-name="doctype:image" alternative-text="Doc image" ></lightning-icon>
</template>

2. Use SVG in LWC template and use it directly. (you can provide api attributes for dynamic nature)

mysvg.html:

<template>
    <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
        <rect width="100%" height="100%" fill="red"></rect>
        <circle cx="150" cy="100" r="80" fill="green"></circle>
        <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
    </svg>
</template>

Then use it wherever you need:

<template>
    <c-mysvg></c-mysvg>
</template>

3. Upload SVG in static resource and reference it in LWC JS.

JS:

import { LightningElement } from 'lwc';
import SVG_URL from '@salesforce/resourceUrl/svg_url';

export default class myComponent extends LightningElement {
    get svgURL {
        return SVG_URL;
    }
}

HTML:

<template>
    <svg xmlns="http://www.w3.org/2000/svg">
        <use xlink:href={svgURL}></use>
    </svg>
</template>

enter image description here

-1

You can add /apexpages/slds/latest in xlink:href to resolve icon rendering issue. Here is code which show user icon.

<span class="slds-avatar slds-avatar_circle">
      <span class="slds-icon_container slds-icon-standard-user" title="Description of icon when needed">
        <svg class="slds-icon" aria-hidden="true">
          <use xlink:href="/apexpages/slds/latest/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
        </svg>
        <span class="slds-assistive-text">Description of icon when needed</span>
      </span>
    </span>
  • But why should we even use like this when these standard icons are available through "lightning-icon" ? – salesforce-sas Aug 17 at 17:12
  • Yes. It is advisable to use lightning:icon. But my answer to resolve his issue. – Dhanik Lal Sahni Aug 17 at 17:58

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.