Ionic-framework: bug: ionicons not showing with ionic/vue

[cabassi]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

Icons are not showing in the frontend. This is a strange behaviour since the X icon and the hamburger menu icon are showing correctly. In fact all the icons in this list are working fine:
'ios-close': icons.close.ios,
'md-close': icons.close.md,
'ios-reorder': icons.reorder.ios,
'md-reorder': icons.reorder.md,
'ios-menu': icons.menu.ios,
'md-menu': icons.menu.md,
'ios-arrow-forward': icons.arrowForward.ios,
'md-arrow-forward': icons.arrowForward.md,
'ios-arrow-back': icons.arrowBack.ios,
'md-arrow-back': icons.arrowBack.md,
'ios-arrow-down': icons.arrowDown.ios,
'md-arrow-down': icons.arrowDown.md,
'ios-search': icons.search.ios,
'md-search': icons.search.md,
'ios-close-circle': icons.closeCircle.ios,
'md-close-circle': icons.closeCircle.md,

These are the ones that are loaded by the appInitialize method in ionic-vue.common.js
I can't understand why the all the other icons are not working.
As far as I can tell all the ionicons should be available straight out of the box when using ionic right?

Expected behavior:

The icon should appear

Steps to reproduce:

Related code:

<ion-button @click="startTraining">

                        <ion-icon slot="icon-only" name="play"></ion-icon>
                    </ion-button>
                    <ion-button @click="close">
                        <ion-icon slot="icon-only" name="close"></ion-icon>
                    </ion-button>

The close icon is rendered correctly, the play's not.

Other information:

Ionic info:

Ionic:

   Ionic CLI : 5.4.16

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.14.0
   npm    : 6.13.4
   OS     : macOS Catalina

[c2-erogers]

Same issue here with Ionic 5 (just updated from 4); only the addIcons list of icons are rendering.

Currently doubling up the requires from my main.js file to include the icons I need (not sure how to get the outline/sharp versions considering they don't exist for all the icons in these lists), i.e.:

var ionicons = require('ionicons');
var icons = require('ionicons/icons');

ionicons.addIcons({
  'ios-aperture': icons.iosAperture,
  'md-aperture': icons.mdAperture,
});

[rjurado01]

Yes, this icons are loaded by default: https://github.com/ionic-team/ionic/blob/69e10de718dcba4d43e82bd37aeacd2585dd9a79/vue/src/app-initialize.ts#L23

Y have to add this code to load other icons:

// main.js
import Ionic from '@ionic/vue';
import {add} from '@ionic/vue/node_modules/ionicons/icons';
import {addIcons} from '@ionic/vue/node_modules/ionicons';

Vue.use(Ionic);

addIcons({
  'ios-add': add.ios,
  'md-add': add.md
});

[cabassi]

Thanks @rjurado01, I already know how to manually add icons.
What I'm saying is that per documentations all the icons should be available without having to add them manually.

[liamdebeasi]

Thanks for the issue. I am going to close this as we are waiting for Vue 3 to stabilize before we push forward with Ionic Vue development. Once Vue 3 stabilizes we will look into providing an update that brings better support for Ionicons (namely Ionicons v5). Thanks!

[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.