How to import CUSTOM ICONS using new STANDALONE Ionic components

Ionic Framework Ionic Angular
1

Hi, after update to Ionic 7.5, I´m trying to migrate my app to standalone the ionic components.
I use my own icons. I have my icons in the src/assets/icons/example-icon.svg path.

My angular.json asset configuration is as follows:

"assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              }
            ],

And from my component, I´m importing the icons like this:

// To import addIcons method
import { addIcons } from 'ionicons';

// My custom icon path
const carIcon = 'assets/icons/tab-car.svg';

// My contructor

constructor() {
    addIcons({
      carIcon
    });
  }

// My template
<ion-icon class="tab-icon" name="tab-car"></ion-icon>

The error is:

image
image1150×306 57.7 KB

What´s wrong in my code?

Anyone knows how is the right way to import a custom icon with the new standalone ionic components standard?

Thank you.

2

Hi,

I think the error is in your template, where you use “tab-car” as icon name in place of “carIcon”. If you want to map your icon, use

addIcons({ "tab-car": carIcon });