How to Use Ionicons in a Vue Project demo repo

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

👣 Steps

  1. Create a Vue project.
npm i -g @vue/cli
vue create vue-demo
  1. Place Ionicons script in public/index.html just before </body>.
<script src="https://unpkg.com/ionicons/dist/ionicons.js"></script>
  1. Use Ionicons, e.g. in src/views/ionicons.vue.
<template>
  <div>
    <h1>Ionicons Demo</h1>

    <div class="grid">
      <table
        v-for="item in ionicons"
        :key="item.name"
        class="table table-striped"
      >
        <thead>
          <tr>
            <th class="text-align-center">{{ item.name }}</th>
            <th class="text-align-center">Icon</th>
          </tr>
        </thead>

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

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

export default {
  data() {
    return {
      ionicons: [
        {
          name: "App icons",
          icons: appIcons
        },
        {
          name: "Logos",
          icons: logos
        }
      ]
    };
  }
};
</script>

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

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

In src/assets/ionicons.js:

const appIcons = [
  "add",
  "add-circle",
  "add-circle-outline",
  "airplane",
  "alarm",
  "albums",
  "alert",
  "american-football",
  "analytics",
  "aperture",
  "apps",
  "appstore",
  "archive",
  "arrow-back",
  "arrow-down",
  "arrow-dropdown",
  "arrow-dropdown-circle",
  "arrow-dropleft",
  "arrow-dropleft-circle",
  "arrow-dropright",
  "arrow-dropright-circle",
  "arrow-dropup",
  "arrow-dropup-circle",
  "arrow-forward",
  "arrow-round-back",
  "arrow-round-down",
  "arrow-round-forward",
  "arrow-round-up",
  "arrow-up",
  "at",
  "attach",
  "backspace",
  "barcode",
  "baseball",
  "basket",
  "basketball",
  "battery-charging",
  "battery-dead",
  "battery-full",
  "beaker",
  "bed",
  "beer",
  "bicycle",
  "bluetooth",
  "boat",
  "body",
  "bonfire",
  "book",
  "bookmark",
  "bookmarks",
  "bowtie",
  "briefcase",
  "browsers",
  "brush",
  "bug",
  "build",
  "bulb",
  "bus",
  "business",
  "cafe",
  "calculator",
  "calendar",
  "call",
  "camera",
  "car",
  "card",
  "cart",
  "cash",
  "cellular",
  "chatboxes",
  "chatbubbles",
  "checkbox",
  "checkbox-outline",
  "checkmark",
  "checkmark-circle",
  "checkmark-circle-outline",
  "clipboard",
  "clock",
  "close",
  "close-circle",
  "close-circle-outline",
  "cloud",
  "cloud-circle",
  "cloud-done",
  "cloud-download",
  "cloud-outline",
  "cloud-upload",
  "cloudy",
  "cloudy-night",
  "code",
  "code-download",
  "code-working",
  "cog",
  "color-fill",
  "color-filter",
  "color-palette",
  "color-wand",
  "compass",
  "construct",
  "contact",
  "contacts",
  "contract",
  "contrast",
  "copy",
  "create",
  "crop",
  "cube",
  "cut",
  "desktop",
  "disc",
  "document",
  "done-all",
  "download",
  "easel",
  "egg",
  "exit",
  "expand",
  "eye",
  "eye-off",
  "fastforward",
  "female",
  "filing",
  "film",
  "finger-print",
  "fitness",
  "flag",
  "flame",
  "flash",
  "flash-off",
  "flashlight",
  "flask",
  "flower",
  "folder",
  "folder-open",
  "football",
  "funnel",
  "gift",
  "git-branch",
  "git-commit",
  "git-compare",
  "git-merge",
  "git-network",
  "git-pull-request",
  "glasses",
  "globe",
  "grid",
  "hammer",
  "hand",
  "happy",
  "headset",
  "heart",
  "heart-dislike",
  "heart-empty",
  "heart-half",
  "help",
  "help-buoy",
  "help-circle",
  "help-circle-outline",
  "home",
  "hourglass",
  "ice-cream",
  "image",
  "images",
  "infinite",
  "information",
  "information-circle",
  "information-circle-outline",
  "jet",
  "journal",
  "key",
  "keypad",
  "laptop",
  "leaf",
  "link",
  "list",
  "list-box",
  "locate",
  "lock",
  "log-in",
  "log-out",
  "magnet",
  "mail",
  "mail-open",
  "mail-unread",
  "male",
  "man",
  "map",
  "medal",
  "medical",
  "medkit",
  "megaphone",
  "menu",
  "mic",
  "mic-off",
  "microphone",
  "moon",
  "more",
  "move",
  "musical-note",
  "musical-notes",
  "navigate",
  "notifications",
  "notifications-off",
  "notifications-outline",
  "nuclear",
  "nutrition",
  "open",
  "options",
  "outlet",
  "paper",
  "paper-plane",
  "partly-sunny",
  "pause",
  "paw",
  "people",
  "person",
  "person-add",
  "phone-landscape",
  "phone-portrait",
  "photos",
  "pie",
  "pin",
  "pint",
  "pizza",
  "planet",
  "play",
  "play-circle",
  "podium",
  "power",
  "pricetag",
  "pricetags",
  "print",
  "pulse",
  "qr-scanner",
  "quote",
  "radio",
  "radio-button-off",
  "radio-button-on",
  "rainy",
  "recording",
  "redo",
  "refresh",
  "refresh-circle",
  "remove",
  "remove-circle",
  "remove-circle-outline",
  "reorder",
  "repeat",
  "resize",
  "restaurant",
  "return-left",
  "return-right",
  "reverse-camera",
  "rewind",
  "ribbon",
  "rocket",
  "rose",
  "sad",
  "save",
  "school",
  "search",
  "send",
  "settings",
  "share",
  "share-alt",
  "shirt",
  "shuffle",
  "skip-backward",
  "skip-forward",
  "snow",
  "speedometer",
  "square",
  "square-outline",
  "star",
  "star-half",
  "star-outline",
  "stats",
  "stopwatch",
  "subway",
  "sunny",
  "swap",
  "switch",
  "sync",
  "tablet-landscape",
  "tablet-portrait",
  "tennisball",
  "text",
  "thermometer",
  "thumbs-down",
  "thumbs-up",
  "thunderstorm",
  "time",
  "timer",
  "today",
  "train",
  "transgender",
  "trash",
  "trending-down",
  "trending-up",
  "trophy",
  "tv",
  "umbrella",
  "undo",
  "unlock",
  "videocam",
  "volume-high",
  "volume-low",
  "volume-mute",
  "volume-off",
  "walk",
  "wallet",
  "warning",
  "watch",
  "water",
  "wifi",
  "wine",
  "woman"
];

const logos = [
  "logo-android",
  "logo-angular",
  "logo-apple",
  "logo-bitbucket",
  "logo-bitcoin",
  "logo-buffer",
  "logo-chrome",
  "logo-closed-captioning",
  "logo-codepen",
  "logo-css3",
  "logo-designernews",
  "logo-dribbble",
  "logo-dropbox",
  "logo-euro",
  "logo-facebook",
  "logo-flickr",
  "logo-foursquare",
  "logo-freebsd-devil",
  "logo-game-controller-a",
  "logo-game-controller-b",
  "logo-github",
  "logo-google",
  "logo-googleplus",
  "logo-hackernews",
  "logo-html5",
  "logo-instagram",
  "logo-ionic",
  "logo-ionitron",
  "logo-javascript",
  "logo-linkedin",
  "logo-markdown",
  "logo-model-s",
  "logo-no-smoking",
  "logo-nodejs",
  "logo-npm",
  "logo-octocat",
  "logo-pinterest",
  "logo-playstation",
  "logo-polymer",
  "logo-python",
  "logo-reddit",
  "logo-rss",
  "logo-sass",
  "logo-skype",
  "logo-slack",
  "logo-snapchat",
  "logo-steam",
  "logo-tumblr",
  "logo-tux",
  "logo-twitch",
  "logo-twitter",
  "logo-usd",
  "logo-vimeo",
  "logo-vk",
  "logo-whatsapp",
  "logo-windows",
  "logo-wordpress",
  "logo-xbox",
  "logo-xing",
  "logo-yahoo",
  "logo-yen",
  "logo-youtube"
];

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