如何在ion-select-option前面添加国旗图标？

Question

我正在创建Ionic 4 plus Angular应用程序，因为我正在使用离子选择下拉菜单选择国家/地区。现在我想在国家名称前添加国家/地区标志图标。下面的代码显示了我正在尝试的操作。< / p>

<ion-select class="dropdownselection" placeholder="PROVINCIA" interface="popover">
                  <ion-select-option value="A Coruña">
                    <ion-icon src="/assets/icons/man.svg"></ion-icon> A Coruña
                  </ion-select-option>
                  <ion-select-option value="Álava">Álava</ion-select-option>
                  <ion-select-option value="Albacete">Albacete</ion-select-option>
                  <ion-select-option value="red">D</ion-select-option>
                </ion-select>

Answer 1

我知道在Ionic 3中没有可靠的方法来添加图标。我不确定Ionic 4，但我使用this plugin及其出色的功能。

这里是example。

此插件的另一个巨大好处是您可以异步搜索大量数据。

Answer 2

旧，但如果有人需要，您可以使用国旗表情符号的 unicode（您可以找到列表 here）。

确保您使用 UTF-8 作为元字符集。

然后，将表情符号复制/粘贴到一个对象中（例如在引号之间）：

最后，使用模板 {{ myObject.flagIcon }} 中的属性。

来自我的应用的示例：