Ion-icon custom icons won't appear

Ionic Framework Ionic Vue
1

I’m trying to use custom icons for my ion-icon, and my code are as below. The custom icons will appear during development (running ionic serve), but after I compiled it using ionic build --prod and deploy it on my server, the custom icons will be missing.

<ion-grid>
        <ion-row>
          <ion-col>
            <ion-icon :icon="charity"></ion-icon><br/>
            Driving License Renewal Reminder
          </ion-col>
          <ion-col>
            <ion-icon :icon="knowledge"></ion-icon><br/>
            Receipts Keeper
          </ion-col>
        </ion-row>
 </ion-grid>

<script lang="ts">
export default defineComponent({
  components: { IonIcon },  
  setup () {
    const router = useRouter();
    return { router,  };
  },
  data() {
    return {
      charity: '/src/assets/img/charity.svg',
      knowledge: '/src/assets/img/knowledge.svg',
}
</script>