Using Nova's <Icon> component in a custom Card component

I'm building a small card that just takes in a heading and a message, along with a theme (like alert, success, etc) and renders a small card with the message. A very simple card for displaying persistent messages on resources or dashboards. In the card, I want to use the Nova Icon component so that users can pass in the name of a heroicon and it will be rendered automatically, but for some reason, the icon isn't rendering.

Implementation example:

Alert::make()
                ->heading('My Heading')
                ->message('My Message')
                ->icon('person')
                ->success()
                ->width('1/2'),

and here is the Card.vue

<template>
    <div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow border-l-4 p-4 flex flex-row"
             :class="`border-${color}-500 text-${color}-500`"
             role="alert">
            <Icon v-if="this.card.icon" :type="this.card.icon" :class="`w-6 h-6 text-${color}-500`"/>
            <div>
                <p v-if="card.withHeading" class="text-lg font-bold">{{ card.heading }}</p>
                <p v-if="card.asHtml" v-html="card.message"/>
                <p v-else class="text-gray-600 dark:text-gray-500" v-text="card.message"/>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props: [
        'card'
    ],

    data: () => ({
        themes: {
            info: {
                color: "primary"
            },
            success: {
                color: "green"
            },
            warning: {
                color: "orange"
            },
            danger: {
                color: "red"
            }
        },
    }),

    computed: {
        computedTheme() {
            if (!this.card.theme) {
                return 'primary';
            }

            return this.themes[this.card.theme].color
        },

        color() {
            return this.theme.color
        },
    },

    methods: {}
}
</script>

But instead of rendering the icon's svg like other components do, the final Icon HTML shows this:

<heroicons-outline-person class="inline-block w-6 h-6 text-green-500" role="presentation" width="24" height="24" viewbox="0 0 24 24"></heroicons-outline-person>

So it's getting the right heroicon component, it's just not rendering it for some reason. I've run npm run nova:install and I've got npm run watch polling in the background for changes, and I've cleared my cache on the browser, all to no avail. Any ideas why this isn't rendering?