Ionic 4, Ionicon library adding a custom icon

Question

I'm currently using Vue Cli to generate a project which includes ionic and ionicon libraries.

package.json

  "@ionic/core": "^4.11.7",
  "@ionic/pwa-elements": "^1.4.1",
  "@ionic/vue": "0.0.9",
  "ionicons": "^4.6.3",

I'm trying to add a custom icon to my project. I'm following the Ionic documentation https://ionicons.com/usage which state that in order to add a custom SVG icon the following steps must be taken:

To use a custom SVG, provide its URL in the src attribute to request the external SVG file. The src attribute works the same as in that the URL must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid SVG and does not allow scripts or events within the SVG element.

I've followed the example and the icon is not being loaded. Another example for the same case scenario that I've found is the following https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html. Following this example I've tried adding the SVG code for the icon directly in the src. This seems to work but for organization purposes, I would find it more convenient if I could pass the file path to the component.

Answer 1

This is what I did to get this to work in Vue

1. In your vue-cli project, install latest @ionic/vue
   npm i @ionic/[email protected]
2. Modify main.js

if you only want to use custom icons:

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

Vue.use(Ionic);
Vue.config.productionTip = false

new Vue({
  render: function (h) { return h(App) },
}).$mount('#app')

if you also want to use ionicons (inside addIcons I'm basically doing this:
addIcons({"ios-star": star.ios, "md-star": star.md}). This is of course optional but this way I only need to add a new entry to my arrays if I want a new icon inside my app, you can read more about that here.):

import Vue from 'vue'
import App from './App.vue'
import Ionic from '@ionic/vue'
import '@ionic/core/css/ionic.bundle.css'
import { addIcons } from 'ionicons'
import camelCase from 'lodash/fp/camelCase'

// ionicons.com App icons
const appIcons = ['star', 'images']
// ionicons.com Logos
const logos = ['logo-facebook']

Vue.use(Ionic);
Vue.config.productionTip = false

addIcons({
 // App icons object
 ...appIcons.reduce((acc, name) => {
   return {
     ...acc,
     [`ios-${name}`]: require('ionicons/icons')[camelCase(name)].ios,
     [`md-${name}`]: require('ionicons/icons')[camelCase(name)].md
   }
 }, {}),
 // Logos object
 ...logos.reduce((acc, name) => {
   return {
     ...acc,
     [name]: require('ionicons/icons')[camelCase(name)]
   }
 }, {}),
})

new Vue({
 render: function (h) { return h(App) },
}).$mount('#app')

3. Copy my custom svg icon into the public folder
4. Use the custom icon: <ion-icon src="/custom.svg" />

Edit: if you want to use src/assets instead of public folder
I also tried to move my custom icons to src/assets folder because of vue-cli public folder. I found that for some reason with vue-cli, webpack does not pick up custom icons when putting them into src/assets folder and using the icons as <ion-icon src="./assets/custom.svg" />. So if you want to keep your icons in the src/assets, this workaround worked for me (based on this):

<ion-icon :src="require(`@/assets/custom.svg`)" />