How can I load Material Design Icons font files inside a Shadow Root when using WXT’s cssInjectionMode: 'ui'?

[PendalF89]

I’m building a browser extension with WXT and Vuetify, and I need to render components inside a Shadow Root. In my content script I’ve set up:

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify/framework'
import { createApp } from 'vue'
import { createShadowRootUi } from 'wxt/utils/content-script-context'

export default defineContentScript({
  matches: ['<all_urls>'],
  cssInjectionMode: 'ui',

  async main(ctx) {
    const ui = await createShadowRootUi(ctx, {
      name: 'my-shadow-ui',
      mode: 'closed',
      onMount: (container, shadow) => {
        const app = createApp(App).use(createVuetify({
          theme: { stylesheetId: 'vuetify-theme' },
        }))
        app.mount(container)
        return app
      },
    })
  },
})

The CSS from materialdesignicons.css is injected into the Shadow Root, but the @font-face rules still reference relative paths like ../fonts/materialdesignicons-webfont.woff2. Because those URLs don’t resolve in the Shadow DOM, the font files never load and the icons don’t appear.

How can I correctly include or load icon font files (e.g. Material Design Icons) in my Shadow Root when using WXT’s cssInjectionMode: 'ui'?