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

2

2 Answers 2

11

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

5
  • 1
    Why can not I use according to the instructions? lightningdesignsystem.com/components/icons
    – Yarom
    Aug 17, 2019 at 17:05
  • added in answer Aug 17, 2019 at 17:11
  • 1
    Method 3 does not seem to work in my LWC. It outputs <use xlink:href="#httpssandbox1examplecs100forcecomcustomersresource1586165694000exampleiconhome"></use>. It seems to sanitize the Url string. Any suggestions?
    – Hans
    Apr 6, 2020 at 11:08
  • @Michael, you may be not importing the resource correctly Apr 6, 2020 at 16:42
  • I thought I was doing it according to the docs: import customSR from '@salesforce/resourceUrl/example_icon_home', where example_icon_home is a zip file static resource.
    – Hans
    Apr 7, 2020 at 9:03
9

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>
3
  • But why should we even use like this when these standard icons are available through "lightning-icon" ? Aug 17, 2019 at 17:12
  • 2
    Yes. It is advisable to use lightning:icon. But my answer to resolve his issue. Aug 17, 2019 at 17:58
  • 1
    Just commenting in case others come across this: This is still the only way to get icons to work in this specific case. Can't find anywhere in their docs that mention the extra /apexpages/slds/latest/ part of the href path, but it DOES work for me.
    – zigzag
    Feb 13 at 19:51

You must log in to answer this question.

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