Dynamic Icon loading in LWC doesn't work

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>

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>