使用 Ionic 5 自定义图标？

Question

我最近从 Ionic 4 更新到了 Ionic 5。在 Ionic 5 中，图标也收到了更新。然而，显然加载图标的机制也发生了变化。

在 Ionic 4 中，可以添加这样的自定义图标：https : //medium.com/@JordanBenge/how-to-create-custom-ionic-4-icons-af80cc6cc148

在assets 的图标文件夹中添加例如 ios-my-custom-icon.svg和md-my-custom-icon.svg。然后有必要在angular.json 中引用它们，例如：

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

人们终于可以像 html 中的其他离子图标一样调用它们：

<ion-icon name="my-custom-icon"></ion-icon>

然而，这不再适用于 ionic 5。有人知道，我们现在如何在 ionic 5 中实现自定义图标？

编辑：我意识到仍然可以通过 src 属性调用它们，例如

<ion-icon src="assets/icon/md-my-custom-icon.svg"></ion-icon>

然而，这并不像使用 name 属性那样方便。有没有机会我们有一些与上述相同的东西？

Answer 1

如果您愿意，您始终可以只使用[]然后提供一个变量：

const myCustomIcon = "/assets/icons/custom.svg";

在标记中：

<ion-icon [src]="myCustomIcon"></ion-icon>

Answer 2

您需要md-从图标名称中删除。

例如，您的图标是 md-my-custom-icon.svg

更改为my-custom-icon.svg。之后，自定义图标将再次在 ionic 5 上工作

干杯

更新

我不得不把md-图标名称放回原处，然后实际将其添加md-到离子图标标签中，如下所示。这样它使用我的自定义图标而不是默认图标。

<ion-icon name="md-my-custom-icon"></ion-icon>