离子图标在 ionic 7.1.1 / Angular: 17.0.8

Question

我正在使用 Angular 独立组件，ionic 版本是 7.1.1 / Angular 版本：17.0.8。

这是 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>

这是 ts 类：

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}}
  }
}

如上所述，离子图标未显示，这是浏览器控制台中的错误：

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


顺便说一下，我尝试使用以下命令安装最新的 ionic 版本： npm install -g @ionic/cli@latest 但它保留了当前版本：7.1.1

你有什么建议？

Answer 1

要使用离子图标，您必须单独导入它们：

例如：

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
  }
}

Answer 2

您需要添加所有图标，例如：

 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
}

Answer 3

我在 Angular 17、Ionic 7 和独立版上也遇到了同样的问题。 尽管使用了 Ionic 框架，但图标没有显示。

我使用了 Юлія Гороховацька 的解决方案（非常感谢 Julia），它工作正常，但如果您的导入中已经有 IonicModule，则不需要在那里添加 IonIcon。 如果这样做，您将在控制台中收到错误：错误错误：NG0300：多个组件与标记名离子图标匹配节点：IonIcon 和 IonIcon。 （也可能在您的 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
  }

我添加这个答案，以防像我这样的另一个初学者发现这个，节省几分钟。

我会发表评论而不是添加答案，但我没有足够的积分来这样做。 ^^'