Using FontAwesome in Svelte Native dynamically

Question

I would like to do something like this:

<script lang="ts">
  const icons = { bars: "&#xf0c9;" };
</script>

<page>
    <actionBar>
        <gridLayout columns="40, *" class="action-header">
            <label row="0" col="0" class="button-selected">
                <formattedString>
                    <span class="fas" text={icons.bars} />
                </formattedString>
            </label>
            <label row="0" col="1" text="App Header" />
        </gridLayout>
    </action Bar>
</page>

However, when I attempt to do this I get the raw text () instead of the icon as expected. If I put this value in directly it behaves properly. What do I need to do to get the dynamic value to be parsed correctly?