ionic-framework: bug: @ionic/vue@next (0.0.9) not showing icons

Bug Report

Ionic version:

Current behavior:

Most icons throughout the project will not display. Only search and back-arrow appear to be working.

Expected behavior: All icons found at https://ionicons.com/ should display.

Steps to reproduce:

start up the sample project, on the homepage there is an icons example section which will show 5 icons which only 2 are displaying.

<ion-icon name="options"></ion-icon>
<ion-icon name="search"></ion-icon>
<ion-icon name="more"></ion-icon>
<ion-icon name="arrow-back"></ion-icon>  
<ion-icon name="home"></ion-icon>

Other information:

Ionic info:

Ionic:

   Ionic CLI : 5.2.4

Capacitor:

   Capacitor CLI   : 1.1.1
   @capacitor/core : 1.1.1

Utility:

   cordova-res : 0.5.2 (update available: 0.6.0)
   native-run  : not installed

System:

   NodeJS : v12.4.0 (/usr/local/Cellar/node/12.4.0/bin/node)
   npm    : 6.10.3
   OS     : macOS Mojave

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 26 (4 by maintainers)

Commits related to this issue

fix(vue): correctly handle platform specific icons (#22200) resolves #19078 — committed to ionic-team/ionic-framework by liamdebeasi 4 years ago
fix(vue): correctly handle platform specific icons (#22200) resolves #19078 — committed to TakumaKira/ionic-framework by liamdebeasi 4 years ago

Most upvoted comments

It seems you need to add icons before you can use them:

import { addIcons } from "ionicons";
import { construct, home, … } from "ionicons/icons";

addIcons({
  "ios-construct": construct.ios,
  "md-construct": construct.md,
  "ios-home": home.ios,
  "md-home": home.md,
  …
});

+16

LostKobrakai on Aug 13, 2019

Since I didn’t want to import those specific icons per each component. I added all ion icons once and for all in the main.js file

import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';

const currentIcons = Object.keys(allIcons).map(i => {
  return {
    ['ios-' + i]: allIcons[i].ios,
    ['md-' + i]: allIcons[i].md
  };
});
const iconsObject = Object.assign({}, ...currentIcons);
addIcons(iconsObject);

In this case, one can just use any icon in any of the vue files like <ion-icon name="eye"></ion-icon>

joeSaad on Nov 30, 2019

<ion-icon name="add-circle-outline"></ion-icon> and so on still not work. I fix it like this

import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';

const currentIcons = Object.keys(allIcons).map(i => {
  const key = i.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
  if(typeof allIcons[i] === 'string') {
    return {
      [key]: allIcons[i],
    }
  }
  return {
    ['ios-' + key]: allIcons[i].ios,
    ['md-' + key]: allIcons[i].md,
  };
});

const iconsObject = Object.assign({}, ...currentIcons);
addIcons(iconsObject);

fruitriin on Dec 25, 2019

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22200, and a fix will be available in an upcoming release of Ionic Framework.

Additionally, we will be shipping new documentation on how to use Ionicons with Ionic Vue. This should provide more clarification on best practices.

liamdebeasi on Sep 28, 2020

Thanks everyone. This code working for me.

const currentIcons = Object.keys(allIcons).map((i) => {
  let key = i.toLowerCase();
  return {
    ["ios-" + key]: allIcons[i],
    ["md-" + key]:  allIcons[i],
  };
});

const iconsObject = Object.assign({}, ...currentIcons);
addIcons(iconsObject);

And call like it, if icon has multiple word;

<ion-icon name="eyeOff"/>

My package.json have

  "@ionic/core": "^5.1.0",
    "@ionic/vue": "0.0.9",
    "ionicons": "^5.0.1",

abdlkrmdlgr on May 14, 2020