IonIcons 未在 Ionic Angular 独立组件中显示的问题

Question

我目前正在开发一个使用独立组件的 Ionic Angular 项目。我遇到了 IonIcons 在我的模板中无法正确渲染的问题。我的项目是使用 Angular 17 和 Ionicons 7 构建的。

我的模板中使用以下图标会导致警告：

<ion-icon name="log-out-outline" slot="start"></ion-icon>

显示的警告是：

[Ionicons Warning]: Could not load icon with name "log-out-outline". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.

作为解决方法，我尝试手动导入图标，如下所示：

import { camera } from 'ionicons/icons';
//...
export class HomePageComponent implements OnInit {
  camera = camera;
  // ...
}

// In template
<ion-icon [icon]="camera" slot="icon-only" fill="outline"></ion-icon>

虽然这种方法有效，但它并不理想，尤其是在处理大量图标时，因为它使代码不太干净且更难以管理。

我怀疑可能需要特定的导入或配置才能在此设置中正确使用 IonIcons。有没有人遇到过类似的问题，或者可以提供有关如何在具有独立组件的 Ionic Angular 项目中正确导入和使用 IonIcons 的指导？

Answer 1

添加

addIcons({logOutOutline});

在组件的构造函数中。