Overview
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.
<template>
<ion-icon :icon="ioniconsImage"></ion-icon>
<ion-icon :md="ioniconsSquareSharp" :ios="ioniconsTriangleOutline"></ion-icon>
</template>
<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,
},
},
})