Ionic-framework: bug: @ionic/vue@next (0.0.9) <ion-icons> not showing icons

[kisonay]

Bug Report

Ionic version:


@ionic/core: 4.7.4
@ionic/vue: 0.0.9

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.

Related code:

https://github.com/kisonay/ionic-vue-starter/tree/icons

<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

[LostKobrakai]

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,
  …
});

[kisonay]

Thank you! I can't tell you how long I have been trying to figure this out.

I like the idea that you only include what is needed in the product, just wish it was a little better documented instead of just linking to the ionicons website.

[joeSaad]

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>

[lights0123]

For logos:

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

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

[fruitriin]

<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);

[iBobik]

It also seems that ionicons are fetched also from CDN by Ionic itself, but they can not be used.

How to make sure that Ionic will download all icons separately but only icons I use will be included in compiled package?

[js-devil]

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,
  …
});

If you are using ionic/vue with Ionic 5 and ionicons don't show. Try doing this

Do this to use ionicons in Ionic 5

import { iosEye, mdEye } from "ionicons/icons";
import { addIcons } from "ionicons";

addIcons({
  "ios-eye": iosEye,
  "md-eye": mdEye
});

In the template tag in your Vue file, do this to use it
<ion-icon name="eye"></ion-icon>

[js-devil]

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>

use in main.js

const formatString = (string) => {
  return string.includes("ios")
    ? string
        .replace(/ios/, "")
        .match(/[A-Z][a-z]+/g)
        .join("-")
        .toLowerCase()
    : string.includes("md")
    ? string
        .replace(/md/, "icons")
        .match(/[A-Z][a-z]+/g)
        .join("-")
        .toLowerCase()
    : "";
};

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

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

In the template tag in your Vue file, do this to use it
<ion-icon name="eye"></ion-icon>

[kkarkos]

```
import { eye } from "ionicons/icons" // not iosEye
import { addIcons } from "ionicons"

addIcons({
"ios-eye": eye,
})```

[js-devil]

import { eye } from "ionicons/icons" // not iosEye
import { addIcons } from "ionicons"

addIcons({
  "ios-eye": eye,
})```

I am using @ionic/core ^5.0.7 with @ionic/vue 0.0.9
Which versions are you using

[kkarkos]

"@ionic/core": "^5.1.0", - same vue version.

[js-devil]

Well, that solution worked for me

[maxarndt]

None of the above fixed this issue for me.

I can see a 404 Not found in the browser dev tools. The app is looking for the ionicons in /svg instead of /img where the .svg files are located if I do a build.

For example if I use <ion-icon name="add" /> the browser tries to load /svg/md-add.svg but if I inspect my dist folder the icons are located in /img.

Does someone know how to fix this?

I'm using:

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

[abdlkrmdlgr]

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",

[TobyMaxham]

Thanks for all. Was search a solution for this more than 2 hours. That worked.

[frenmanoj]

The solution @LostKobrakai suggested worked for me with the ionicons version 4.x.x. Didn't work with ionicons version 5.x.x though.

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,
  …
});

[umadesign]

Adding the .ios and .md suffix didn't work for me with ionicons 5.0.1.

What worked was:

import { addIcons } from "ionicons";
import { star, removeCircle, addCircle } from "ionicons/icons";
addIcons({
    "ios-star": star,
    "md-star": star,
    "ios-remove-circle": removeCircle,
    "md-remove-circle": removeCircle,
    "ios-add-circle": addCircle,
    "md-add-circle": addCircle    
});

also note the camelCase for compound icon names

[sneko]

Hi,

I succeeded in making icons showing up, but the outline ones are displayed like:

They look really bold 😢 . It seems I could modify the "stroke width" with:

  ion-icon {
    --ionicon-stroke-width: 1px !important;
  }

_I also tried --ionicon-stroke-weight since https://ionicons.com/usage/ mentiones it (conflicts/error in the writing?)_

But it doesn't work at all. Any idea how to make them displaying properly?

Thank you,

Note: Here how I use them with Vue:

addIcons({
  'md-person-outline': personOutline,
  'ios-person-outline': personOutline,
})

And in the template:

ion-icon(name='person-outline', slot='start')

But I'm not sure working with addIcons makes the process recognizing the outline ones and applying the --ionicon-stroke-width CSS property.

[sneko]

Any idea please 😢 ?

[liamdebeasi]

Thanks for the issue! We recently released an all new Ionic Vue beta that should fix most of the issues reported. Can you try out the latest Ionic Vue beta and let me know if this is still an issue?

Getting Started with the latest Ionic Vue beta

The new Ionic Vue beta is built for Vue 3. Moving forward, we are not going to support Vue 2. For information on how to get started with the latest beta, check out our Ionic Vue Getting Started Guide.

At this time, we do not have a migration path from Ionic Vue built for Vue 2 to Ionic Vue built for Vue 3, but the Ionic Framework differences should be minimal.

Feel free to check out our Ionic Vue Beta Announcement blog post for more details on this release.

Help! The reported issue still happens in the latest Ionic Vue beta.

Please follow up here with the issue reproduced in an Ionic starter application running the latest Ionic Vue beta. Also include any revised steps to reproduce the issue. Issues that do not have a GitHub repo with the issue reproduced in an Ionic starter app will be closed.

My issue is resolved/My issue is no longer relevant.

You can either close the issue yourself, or do nothing. If there is no response within 14 days, this thread will be automatically closed.

I have a new issue.

Please create a new issue. Be sure to reproduce the issue in an Ionic starter application running the latest Ionic Vue beta and include a link to the repo.

Be sure to search for your issue first, as the issue you are running into may have already been reported.

We are excited to get closer to the Ionic Vue release and look forward to welcoming new Vue developers to the Ionic community. Please let me know if there are any questions. Thanks!

[nadilas]

Hi @liamdebeasi, I just installed the latest version using "@ionic/vue": "^0.4.0" and created a sample vue app. None of the icons are showing up in either Edge or Chrome.

[liamdebeasi]

Can you reproduce the issue in a blank Ionic starter and provide a link to the repo?

[nadilas]

I installed the @ionic/cli@testing again, just to make sure. Creating a sidemu templated app with ionic start myApp --type vue --tag vue-beta results like this. Should I really upload an "empty" repo like that?

To be more specific: The menu toggle icon, when the menu is collapsed on a smaller screen shows up, but after opening the menu, the menu_toggle icons in the start slot of the menu elements are not showing up.

[liamdebeasi]

Ah okay I see what you mean. It looks like Ionic Vue + IonIcons that use the ios and md prop need some work. I will work on a fix for this. Thanks!

[liamdebeasi]

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.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.