CODEWITHSUNDEEP
angular7ionic4
gaus shaikh
gaus shaikh

Reputation: 145

How to add country flags icon in front of ion-select-option?

I'm creating Ionic 4 plus Angular app, in that i'm using ion-select dropdown for country.now i want to add country flags icons in front of country name.below code shows what i'm try.

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

i want flag icon before country name

Upvotes: 0

Views: 5859

Answers (2)

Adrii
Adrii

Reputation: 1740

Old, but if someone's needing, you can use country flag emoji's unicode (you can find a list here).

Make sure you're using UTF-8 as meta charset.

Then, copy/paste the emoji in, by example, an object (between quotes) :
enter image description here

Finally, use the property in your template {{ myObject.flagIcon }}.

Example from my app :

enter image description here enter image description here

Upvotes: 1

Stephen Romero
Stephen Romero

Reputation: 3022

I know in Ionic 3 there wasn't a a reliable way to add icons. I'm not sure about Ionic 4, but I use this plugin and its great.

Here is an example.

Another huge benefit of this plugin is you can search tons of data asynchronously.

Upvotes: 2

Related Questions