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 '19 at 14:30

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>

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.