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