Just add ionicons@4.5.9-1 to your package.json. This just overrides any peer dependency and can be used as a workaround.

It is published on npm do npm install --save @ionic/vue@next

I’m seeing the same issue. It is probably related to the warning that appears when running ionic serve:

warning  in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'

Temporarily,

• common anything related to Icons in these file (ionic-vue.esm.js, chunk file that’s show in console)

I did this, and app worked for me but that’s not the right solution, but you can do this now to can continue your work

if you can’t find these file go to project directory and from computer/lap search right the first name of file. (if you search for ionic-vue.esm.js write -> ionic and will appear all files/folders started with ionic then choose the file you’re looking for in this case (you should choose ionic-vue.esm.js ).

Just install the ionic package: npm install ionicons@4.5.9-1 --save-dev as @yasin-mesut suggested

Same here. Cant serve freshly created app.

Abdlrahmansaber’s temp-fix works, (He means “Comment” not “Common”) You want to comment out the lines he commented out in his screenshots.

For people running into this in the future, the fix is somewhat buried above. Just update your version of @ionic/vue, eg:

$ npm install @ionic/vue@0.0.9

the work around i found is to first install

npm install @ionic/core@one 
npm install @ionic/vue@0.0.4

modify the main.js file

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//import Ionic from "@ionic/vue"; // comment this line 
import { defineCustomElements as ionic } from "@ionic/core/loader"; // add a direct link to @ionic/core
import { defineCustomElements as svgmorphing } from "stencil-svgpaths-morphing/dist/loader";

import "@ionic/core/css/ionic.bundle.css";

//Vue.config.ignoredElements = [/jeep-\w*/]; // comment this line
Vue.config.ignoredElements = [/^ion-/, /^jeep-/];   // add this line

//Vue.use(Ionic);  // comment this line
ionic(window); // add this line
svgmorphing(window);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

and keep the file router.js as it is meaning still using the IonicVueRouter

and it works fine. Now if you look at package-lock.json ,

@ionic/core is version "4.6.0-dev.201906131724.645b9a9" requiring "ionicons": "4.5.9-1"
@ionic/vue is version 0.0.4 with dependencies @ionic/core@4.6.0 requiring "ionicons": "4.5.10-2

probably I know the reason of this bug

the reason because if you trying to import the {ICON_PATH} it’s return nothing, try to print it in console it will return nothing.

I’m facing the same issue. Cant serve freshly created app.

In fact to see the icons the main.js should be :

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { defineCustomElements as ionic } from "@ionic/core/loader"; // added line
import { defineCustomElements as svgmorphing } from "stencil-svgpaths-morphing/dist/loader";

//import Ionic from "@ionic/vue"; // commented line
import { addIcons } from "ionicons"; // added line
import { ICON_PATHS } from "ionicons/icons"; // added line
import "@ionic/core/css/ionic.bundle.css";

//Vue.config.ignoredElements = [/jeep-\w*/];  // commented line
Vue.config.ignoredElements = [/^ion-/, /^jeep-/]; // added line

//Vue.use(Ionic); // commented line
ionic(window); // added line
svgmorphing(window);
addIcons(ICON_PATHS); // added line
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Now the icons are displayed This can be use as workaround till @ionic/vue is updated to @ionic/core@one

the solution for having other icons is to add them in the main.js file ie for icons “star”,“trash”,“create” you do this

// after import Ionic from "@ionic/vue"; 

import { addIcons } from "ionicons";
import { star, trash, create } from "ionicons/icons";

// after Vue.use(Ionic);
addIcons({
  "ios-star": star.ios,
  "md-star": star.md,
  "ios-trash": trash.ios,
  "md-trash": trash.md,
  "ios-create": create.ios,
  "md-create": create.md
});

that’s it and it works so do it for any icons you want to use even for the one you want to add in a ion-item hope it’s help

I get this resolved by changing ionicons version in package-lock.json

But it should be work with fresh npm install in fact

@wannymiarelli I know it’s killed the icon but you can develop whole app without icon until fix the bug

and you’re right it’s not solution for released app

Have a look at branch ionicone of https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing i add a TestIcons button in Home.Vue and a TestIcons.Vue showing the desired icons

It works fine in @ionic/vue@0.0.9 but only with the ions added in vue appInitialize, ie: close, reorder, menu, arrow-forward, arrow-back, arrow-down, search & close-circle.

When can we hope to have the full access to all icons?

I’ve applied the solution of @Abdlrahmansaber. But it’s not working properly (the compile warning and console error disapeared). I’m trying to follow that: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/ But in the moment I add

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

to main.js all I get is a “blank” page. Current dependencies versions: “dependencies”: { “@ionic/vue”: “0.0.4”, “vue”: “^2.6.10”, “vue-router”: “^3.0.3” }, “devDependencies”: { “@vue/cli-service”: “^3.8.0”, “vue-template-compiler”: “^2.6.10” }

@mbilbao I have the same issue. Did you find a fix?

Yes, I applied the solution of @daarioautumn just downgrade the ionicons package to 4.5.8

You should use the one I suggested two days ago it works and you see the icons

I’ve applied the solution of @Abdlrahmansaber. But it’s not working properly (the compile warning and console error disapeared). I’m trying to follow that: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/ But in the moment I add

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

to main.js all I get is a “blank” page.

Current dependencies versions: “dependencies”: { “@ionic/vue”: “0.0.4”, “vue”: “^2.6.10”, “vue-router”: “^3.0.3” }, “devDependencies”: { “@vue/cli-service”: “^3.8.0”, “vue-template-compiler”: “^2.6.10” }

edit: It works fine to me, even with your quoted import

I’ve applied the solution of @Abdlrahmansaber. But it’s not working properly (the compile warning and console error disapeared). I’m trying to follow that: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/ But in the moment I add

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

to main.js all I get is a “blank” page.

Current dependencies versions: “dependencies”: { “@ionic/vue”: “0.0.4”, “vue”: “^2.6.10”, “vue-router”: “^3.0.3” }, “devDependencies”: { “@vue/cli-service”: “^3.8.0”, “vue-template-compiler”: “^2.6.10” }

Thank you Adrianmed 😃

Same here