When SSR is enabled in nuxt the icons have weird styling and adds extra padding or margin

[batyr993]

Hi, I have project where I use nuxt 3.8.2 along with tailwindcss 3.4.1 When I set ssr to false in nuxt.config.ts the icons have weird behavior. Extra spacing or padding is added making my navigation look unprofessional. When I set ssr to true then everything works as expected. I thought I was messing with my styling or so, but when I commented out my icons, then styling went back to normal.

See the picture below with ssr: false (unexpected behavior)

When I enable ssr: (expected behavior)

My nuxt.config.ts file:

export default defineNuxtConfig({
  //@ts-ignore
  devtools: { enabled: true },
  srcDir: 'src/',
  ssr: false,
  css: ['./assets/css/main.css'],
  modules: ['@pinia/nuxt', 'nuxt-mdi', ['@nuxtjs/i18n', {
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected'
    },
    locales: availableLocales,
    lazy: true,
    langDir: 'translations/',
    defaultLocale: locale
  }]],
  mdi: {
    cache: false,
    componentName: 'MdiIcon',
    defaultSize: '1em'
  },
  pinia: {
    storesDirs: ['./stores/**'],
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
})

Here is how I use icons in my template (excerpt..)

...
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
      <MdiIcon :icon="subItem.icon" class="text-xl"></MdiIcon>
</div>
...

[ezmemoar]

got same issue here. Hope this one fixed asap.

[batyr993]

Thanks @ERPedersen for the fix!