i gave up for now and create components for each icon from the svg file
edit the svg, with some text editor
and make a little component
<template>
<svg style="width:24px;height:24px" viewBox="0 0 512 512">
<path d='M64 384h384v-42.67H64zm0-106.67h384v-42.66H64zM64 128v42.67h384V128z'/></svg>
</template>
<script>
export default {}
</script>
<style>
body
put the path part of the svg file where the path part is above
then save this in components as the name.vue
then in your other code import it
and add to components,
then where you were using
use the name u imported
my little footer component using the icon components
<template>
<ion-footer>
<ion-toolbar >
<ion-buttons slot="start">
<button ion-button @click="back()">
<!-- <ion-icon name="arrowback" ></ion-icon>-Back -->
<arrowback/>-Back
</button>
</ion-buttons>
<ion-buttons slot="end">
<button ion-button @click="next()">Next-
<!-- <ion-icon name="arrowforward"></ion-icon> -->
<arrowforward/>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
</template>
<script >
import { IonToolbar, IonButtons, IonFooter, } from '@ionic/vue';
import arrowback from './arrowback';
import arrowforward from './arrowforward';
export default{
name: 'Footer',
components: { IonToolbar, IonButtons, IonFooter, arrowback, arrowforward} ,
methods:{
next(x){ console.log("next clicked type="+x);return x},
back(x){ console.log("back clicked type="+x);return x},
}
}
</script>
and the arrowforward component
<template>
<svg style="width:24px;height:24px" viewBox="0 0 512 512">
<path d='M464 256c0-114.87-93.13-208-208-208S48 141.13 48 256s93.13 208 208 208 208-93.13 208-208zm-212.65 91.36a16 16 0 01-.09-22.63L303.58 272H170a16 16 0 010-32h133.58l-52.32-52.73A16 16 0 11274 164.73l79.39 80a16 16 0 010 22.54l-79.39 80a16 16 0 01-22.65.09z'/></svg>
</template>
<script>
export default {}
</script>
<style>
body { padding: 1rem; }
</style>
i downloaded the svg icons from the ionicons web site library
