Icons

Icons are auto-imported from ionicons/icons by default, following the pattern of camel case naming with ionicons in front of the original icon name, that you can find on the official ionicons website.

Auto-imported icons
<template>
  <ion-icon :icon="ioniconsImage"></ion-icon>
  <ion-icon :md="ioniconsSquareSharp" :ios="ioniconsTriangleOutline"></ion-icon>
</template>
Manual imports
<script setup lang="ts">
import { image, squareSharp, triangleOutline } from 'ionicons/icons'
</script>

<template>
  <ion-icon :icon="image"></ion-icon>
  <ion-icon :md="squareSharp" :ios="triangleOutline"></ion-icon>
</template>

You can opt-out of auto-importing icons by setting the integrations.icons module options in your nuxt.config.ts to false.

export default defineNuxtConfig({
  ionic: {
    integrations: {
      icons: false,
    },
  },
})
Edit this page on GitHub