I am using the progress-ring LWC component from https://github.com/texei/progress-ring and fail to make the SLDS SVG Icon displayed dynamic work:


<c-progress-ring ... icon="symbols.svg#warning"></c-progress-ring>


<template if:true={icon}>
    <span class="slds-icon_container slds-icon-utility" title={state}>
        <svg class="slds-icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/{icon}"></use>
        <span class="slds-assistive-text">{state}</span>


import { LightningElement, api, track } from "lwc";

export default class ProgressRing extends LightningElement {
    @api min;
    @api max;
    @api icon;
  • 2
    Thanks for the contribution of my component :)
    – FabienHuot
    Commented Jul 31, 2019 at 14:30

2 Answers 2


You can make it work using the <lighting-icon> tag.

<template if:true={icon}>
    <lightning-icon icon-name={iconName} size="x-small" ></lightning-icon>

Have you tried using the <lightning-icon> tag? Documentation can be found here.

For your code, the HTML should look something like this: (you should modify the component call a little bit, so your text for "icon" satisfies the specification (i.e. "action:approval")

<template if:true={icon}>
    <lightning-icon icon-name={icon} alternative-text={state}></lightning-icon>
  • LWC utility icons are showing very slow (after 2sec) after adding dynamically... Any solution to reduce delay. <lightning-icon icon-name="utility:close" size="x-small"></lightning-icon> Commented Apr 13, 2020 at 15:34

You must log in to answer this question.

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