How to Use Ionicons in a Nuxt Project demo repo

Ionicons is an icon set for Ionic Framework and web apps.

👣 Steps

  1. Create a Nuxt project with npx create-nuxt-app nuxt-demo.

  2. Register the script in nuxt.config.js.

export default {
  head: {
    script: [{ src: "", body: true }]
  1. Use Ionicons, e.g. in pages/ionicons.vue.
    <h1>Ionicons Demo</h1>

    <div class="grid">
        v-for="item in ionicons"
        class="table table-striped"
            <th class="text-align-center">{{ }}</th>
            <th class="text-align-center">Icon</th>

          <tr v-for="(subitem, index) in item.icons" :key="index">
            <td>{{ subitem }}</td>
            <td class="text-align-center"><ion-icon :name="subitem" /></td>

import { appIcons, logos } from "@/assets/ionicons";

export default {
  data() {
    return {
      ionicons: [
          name: "App icons",
          icons: appIcons
          name: "Logos",
          icons: logos

<style lang="scss" scoped>
.grid {
  display: grid;
  row-gap: 2rem;

  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;

In assets/ionicons.js:

const appIcons = [

const logos = [

export { appIcons, logos };

📖 Explanation

  • Use icons with ion-icon.
  • Specify the icon with name attribute.
  • For example, to insert a heart icon write <ion-icon name="heart" />.
Last updated: 6/21/2019, 2:32:45 AM