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
    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> Apr 13, 2020 at 15:34

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.