ionicons are not displayed in ionic 7.1.1 / Angular: 17.0.8

Question

i am using Angular standalone component, version of ionic is 7.1.1 / version of Angular: 17.0.8.

this is the html:

<div id="container">
  <strong>{{ name }}</strong>
  <div class="icon-container">
    <p>Windows Shop</p>
        <div class="win-icon">
          <ion-icon name="logo-windows"></ion-icon>          
        </div>
  </div>
</div>

and this is the ts class:

import { Component, Input } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone'; 
import { CommonModule } from '@angular/common';
import {logoWindows} from 'ionicons/icons';

@Component({
  selector: 'app-explore-container',
  templateUrl: './explore-container.component.html',
  styleUrls: ['./explore-container.component.scss'],
  imports: [IonIcon],
  standalone: true,
})

export class ExploreContainerComponent {
  @Input() name?: string;

  constructor(){
    addIcons:{{logoWindows}}
  }
}

As said the ion-icon is not displayed and this is the error in the browser console:

index.js:32 Uncaught TypeError: Failed to construct 'URL': Invalid base URL
    at getAssetPath (index.js:32:22)
    at getNamedUrl (icon.js:46:22)
    at getUrl (icon.js:27:12)
    at Icon.loadIcon (icon.js:296:25)
    at icon.js:257:18
    at Icon.waitUntilVisible (icon.js:291:13)
    at Icon.connectedCallback (icon.js:255:14)
    at Icon.connectedCallback (index.js:3390:43)
    at DefaultDomRenderer2.insertBefore (platform-browser.mjs:563:26)
    at nativeInsertBefore (core.mjs:8495:14)
index.js:32 Uncaught TypeError: Failed to construct 'URL': Invalid base URL
    at getAssetPath (index.js:32:22)
    at getNamedUrl (icon.js:46:22)
    at getUrl (icon.js:27:12)
    at Icon.loadIcon (icon.js:296:25)
    at icon.js:257:18
    at Icon.waitUntilVisible (icon.js:291:13)
    at Icon.connectedCallback (icon.js:255:14)
    at Icon.connectedCallback (index.js:3390:43)
    at StackController.transition (ionic-angular-common.mjs:1351:29)
    at ionic-angular-common.mjs:1242:29
src_app_tab1_tab1_page_ts.js:2 TypeError: Failed to construct 'URL': Invalid base URL
    at getAssetPath (index.js:32:22)
    at getNamedUrl (icon.js:46:22)
    at getUrl (icon.js:27:12)
    at Icon.loadIcon (icon.js:296:25)
    at Icon.componentDidLoad (icon.js:268:18)
    at safeCall (index.js:2389:36)
    at postUpdateComponent (index.js:2299:13)
    at index.js:2207:9
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1) undefined


By the way i tried to install the latest ionic version with the following command : npm install -g @ionic/cli@latest but it keeps the current version which is : 7.1.1

What do you suggest?

Imperfection

what's the logic written in the constructor {{ logoWindows }}? – Reputed

hello Andres, i found that logic in the following video, i guess the new thing with new standalone way of work : youtube.com/watch?v=QprBeO_nCI4 – Imperfection

Answer 1

To use ion-icons you have to import them individually:

For example:

import { IonIcon } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons'; // Import this
import { cameraOutline } from 'ionicons/icons';

@Component({
  selector: 'app-youcomponent',
  templateUrl: 'youcomponent.component.html',
  styleUrls: ['youcomponent.component.scss'],
  standalone: true,
  imports: [ IonIcon ]
})

export class Youcomponent {
  constructor(){
   addIcons({ cameraOutline }); // you are missing addIcons Import
  }
}

Valerio

Answer 2

I had the same problem with Angular 17, Ionic 7 and standalone too. Despite using the Ionic framework but the icons did not show.

I used Юлія Гороховацька's solution (Thanks a lot Julia) and it works fine, except that if you already have the IonicModule in your imports you don't need to add IonIcon there. If you do that you'll get Errors in the console : ERROR Error: NG0300: Multiple components match node with tagname ion-icon: IonIcon and IonIcon. (and probably also in your IDE).

import {addIcons} from 'ionicons';
import {removeCircle} from 'ionicons/icons';

@Component({
  selector: 'app-thingy',
  templateUrl: './thingy.page.html',
  styleUrls: ['./thingy.page.scss'],
  standalone: true,
  imports: [IonicModule]
})
export class ProductsPage implements OnInit {

  constructor() {
    addIcons({removeCircle}); // I needed the remove-circle icon, 
    // please note that this uses string literals so rmeove the dash and capitalize the next letter
  }

I add this answer in case another beginner like me finds this, saves a couple of minute.

I would have commented instead of adding an answer, but I don't have enough points to do so. ^^'

Mikael

Answer 3

import { Component } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { addIcons } from 'ionicons';
import * as icons from 'ionicons/icons';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonicModule],
})
export class HomePage {
  constructor() {
    addIcons({ ...icons });
  }

  exitAccount() {}
}

Use desetructure package....

import * as icons from 'ionicons/icons';

// in class constructor

addIcons({ ...icons });

This standalone is very exaggerated.

Nkvd

Answer 4

You need add all icon, for example:

 app.component.html
<ion-icon name="add"></ion-icon>


app.component.ts
import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonIcon } from '@ionic/angular/standalone';
import {addIcons} from 'ionicons';
import {add} from 'ionicons/icons';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonIcon],
})`enter code here`
export class AppComponent {
  constructor() {addIcons({add});} <--this need write all icons what you need
}

Gregale

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Fineman