Dynamic Icon loading in LWC doesn't work

Question

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:

Usage:

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

HTML:

<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>
        </svg>
        <span class="slds-assistive-text">{state}</span>
    </span>
</template>

JS:

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

export default class ProgressRing extends LightningElement {
    @api min;
    @api max;
    @api icon;
    ...
}

Answer 1

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

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

Answer 2

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>
</template>