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>