5.icons.md

navigation.icon	uil:illustration

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.

::alert{type="info"} ℹ️ Note: Please put all the necessary SVG files in the assets/ionic-icons folder before you run your project. Because when a file is added/deleted in this path, your project will be rerendered again. ::

::alert{type="warning"} ⚠️ Note: When you use #import , change the name of the icon using "as" and the desired name. Because it doesn't interfere with auto-import. ::

::code-group

<template>
  <ion-icon :icon="ioniconsImage"></ion-icon>
  <ion-icon :md="ioniconsSquareSharp" :ios="ioniconsTriangleOutline"></ion-icon>
  <!-- ##### svg icon ##### -->
  <!-- without directoryAsNamespace -->
  <ion-icon :icon="ionicIconSvg`YourSvgFile`"></ion-icon>
  <!-- example -->
  <ion-icon :icon="ionicIconSvgHome"></ion-icon>
  <!-- with directoryAsNamespace -->
  <ion-icon :icon="ionicIconSvg`Subdirectories``YourSvgFile`"></ion-icon>
  <!-- example -->
  <ion-icon :icon="ionicIconSvgTabImage"></ion-icon>
</template>

<script setup lang="ts">
import { image, squareSharp, triangleOutline } from 'ionicons/icons'
import { ionicIconSvgHome as home, ionicIconSvgTabImage as tabImage } from "#imports";
</script>

<template>
  <ion-icon :icon="image"></ion-icon>
  <ion-icon :md="squareSharp" :ios="triangleOutline"></ion-icon>
  <!-- ##### svg icon ##### -->
  <ion-icon :icon="home"></ion-icon>
  <ion-icon :icon="tabImage"></ion-icon>
  <ion-icon :md="home" :ios="tabImage"></ion-icon>
</template>

::

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

export default defineNuxtConfig({
  ionic: {
    integrations: {
      icons: {
        ionicons: false
      },
    },
  },
})