How to add a flag icon in ion-select-option

Ionic Framework
1

I am trying to add a flag icon inside a an ion-select-option. using Ionic 4

  <ion-item>
    <ion-label>Popover</ion-label>
    <ion-select [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="Select One">
      <ion-select-option value="brown">Brown</ion-select-option>
      <ion-select-option value="blonde">Blonde</ion-select-option>
      <ion-select-option value="black">Black</ion-select-option>
      <ion-select-option value="red">Red</ion-select-option>
    </ion-select>
  </ion-item>

Instead of the words, I want flags.
I am trying the following but it is not working

<ion-select [interfaceOptions]="customPopoverOptions" interface="popover">
  <ion-select-option value="brown"><span class='flag-icon flag-icon-gb-eng' slot="end"></span></ion-select-option>
  <ion-select-option value="blonde"><span class='flag-icon flag-icon-gb-eng' slot="end"></span></ion-select-option>
 <ion-select-option value="black"><span class='flag-icon flag-icon-gb-eng'slot="end"></span></ion-select-option>
<ion-select-option value="red"><span class='flag-icon flag-icon-gb-eng' slot="end"></span></ion-select-option>
  </ion-select>
2

Maybe see this


3

Thanks for the response, I am using ionic 4. And the goal is not to save the flags as images in the asset file.

4

what u can do is if u are getting country codes from the backend or u can fill the values as predefined then just use css-sprite to map ur flags image to country code
u can get the css and image from here (size is hardly kb so wont effect ur app )
and use the below code to provide the code and get the image

 <ion-select-option value="brown"><span ngClass="flag flag-{{data?.iso2code}}"></span></ion-select-option>
or
<ion-select-option value="brown"><span ngClass="flag flag-us"></span></ion-select-option>
5

one more answer is using this plgin

see this example

6

This doesnt work actually, the span. :S

7

can u explain how did u proceed?? bcoz I use it and it works good

8

I am using a flag library . And the option is totally blank, no flag or anything.
https://flagicons.lipis.dev/

 <ion-toolbar>
                    <ion-card-subtitle mode="md">{{'SETTINGS.changeLanguage' | translate}}</ion-card-subtitle>
                    <ion-buttons slot="primary">
                      <ion-item>
                        <ion-select [interfaceOptions]="customPopoverOptions" interface="popover">
                          <ion-select-option value="brown"><span Class="flag-icon flag-icon-gb">English</span></ion-select-option>
                          <ion-select-option value="blonde">Blonde</ion-select-option>
                          <ion-select-option value="black">Black</ion-select-option>
                          <ion-select-option value="red">Red</ion-select-option>
                        </ion-select>
                      </ion-item>
                    </ion-buttons>
                  </ion-toolbar>
9

did u read how to implement in the link provided? what was the error?

10

Capture .
There is no error thrown. Just blank

11

It looks like the<ion-select-option> doesnt allow any thing that is not text. Because I already put the span outside the ion-select, and it displayed the flag.

12

use the css sprite method, include the css and image in ur assets and the inside ur span just use class=" flag flag-gb"

13

try solution from this

also an alternative link from stackoverflow

14

thanks a lot :slight_smile:

1 Like
15

Actually i think will go with the sprite flags. Should i download the repository and put it in my assets folder? or what? I totally forgot how to use those.

First copy the set you want to you to your local html project

Next edit the CSS filename and make sure the image url is correct for your project:

.flag.flag-24 {
  // ...
  background-image: url('sprite-flags-24x24.png'); 
  // ...
}
Next include the appropriate CSS file in the head of your HTML. E.g. if you want to use 24x24 and the filename is sprite-flags-24x24.css in your project

<link
  rel="stylesheet"
  type="text/css"
  href="sprite-flags-24x24.css"
/>
16

download the css and image put them in ur asset same folder
inside ur index.html

<!-- Country Icon css -->
<link href="assets/css/flags.css" rel="stylesheet">

and then directly use them with class inside ur element

<div class="flag flag-us"></div>
1 Like
17

i want to add country name with flag in select tag i tried many ways flag-icon-css but nothing is working in select tag. then i tried to append https://stackoverflow.com/questions/48699878/ionic-select-list-added-image-icon-does-not-work like this link image can append in list but cant select that image and show in drop down
please help my code is like this

    <select class="selectMethod" formControlName="payMethod" id="payMethod">
      <option class="paymethodClass" value="">INR </option>
      <option selected=selected *ngFor="let paymeth of currencyList; let i = inssdex"
              [ngValue]="paymeth"> {{paymeth?.name}}</option>
    </select>

and i want output like this:-

image

Thanks

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

It still doesnt work with this solution.

20

You can catch the label innerHTML and replace with icons after loaded

const labelElements = document
        .querySelectorAll(
          'ion-popover .popover-wrapper .popover-content .popover-viewport .sc-ion-select-popover ion-item ion-label');
for (let index = 0; index < labelElements.length; index++){
          const labelElement = labelElements[index];
          if(labelElement.innerHTML ==='Daily'){
            labelElement.innerHTML = '<ion-icon size="large" src="assets/custom-ion-icons/walking.svg"></ion-icon>';
          }
}

you have to put this in a timeOut with 100ms delay.

1 Like