# Ionic Select list option with flag/image

**URL:** <https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972>\
**Category:** ionic-v3\
**Created:** [May 19, 2017, 12:57pm UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972 "2017-05-19T12:57:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![satyaprakash\_pandey](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@satyaprakash\_pandey](https://forum.ionicframework.com/u/satyaprakash_pandey)\
**Post date:** [May 19, 2017, 12:57pm UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/1 "2017-05-19T12:57:07Z")

</div>

Hi,

I have to make ionic select list option with country flag/img as like given in following screenshot-

![image](https://global.discourse-cdn.com/ionicframework/original/3X/d/f/df8d144c75c5724ff0dc60eee09d69a61696514d.png)

Any idea to add flag/image in select list in Ionic2/3…

Thanks,

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [May 19, 2017, 9:37pm UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/2 "2017-05-19T21:37:05Z")

</div>

[flag-icon-css](https://github.com/lipis/flag-icon-css) looks like it might be helpful.

---

<div class="post-metadata">

**Author:** ![satyaprakash\_pandey](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@satyaprakash\_pandey](https://forum.ionicframework.com/u/satyaprakash_pandey)\
**Post date:** [May 20, 2017, 6:14am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/3 "2017-05-20T06:14:10Z")

</div>

Hi,

As per your suggestion of [https://github.com/lipis/flag-icon-css](https://github.com/lipis/flag-icon-css) (css will be helpful) , I have done following changes

**In html:**

```auto
<ion-select>
  <ion-option *ngFor="let cc of currencyList" value="{{ cc }}">
    <span class='flag-icon flag-icon-{{ cc.slice(0, -1) }}'></span>
    {{ cc }}
  </ion-option>
</ion-select>

```

and in the JS/TS:

```auto
this.currencyList = [
    'INR',
    'GBP',
    'USD',
    'NZD'
  ]

```

but image is not displaying. Also I checked that adding any html tag/class inside `<ion-option>` does not displayed on views.

Please advise how to achieve this from Ionic?

Thanks,

---

<div class="post-metadata">

**Author:** ![mthomka](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mthomka/32/110492_2.png) [@mthomka](https://forum.ionicframework.com/u/mthomka)\
**Post date:** [August 16, 2017, 9:06am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/4 "2017-08-16T09:06:07Z")

</div>

Hi @satyaprakash_pandey

did you find a solution to this issue?

---

<div class="post-metadata">

**Author:** ![m\_abdelfattah](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/m_abdelfattah/32/64983_2.png) [@m\_abdelfattah](https://forum.ionicframework.com/u/m_abdelfattah)\
**Post date:** [October 18, 2017, 11:21am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/5 "2017-10-18T11:21:43Z")

</div>

@mthomka, @satyaprakash_pandey Did anyone find a way?

---

<div class="post-metadata">

**Author:** ![Wcjord](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wcjord/32/122714_2.png) [@Wcjord](https://forum.ionicframework.com/u/Wcjord)\
**Post date:** [March 6, 2018, 3:50pm UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/6 "2018-03-06T15:50:27Z")

</div>

I’m trying to figure this out as well!

---

<div class="post-metadata">

**Author:** ![AhmedElShemy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ahmedelshemy/32/116875_2.png) [@AhmedElShemy](https://forum.ionicframework.com/u/AhmedElShemy)\
**Post date:** [March 20, 2018, 7:32pm UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/7 "2018-03-20T19:32:24Z")

</div>

any changes or hints here ?

---

<div class="post-metadata">

**Author:** ![Quiesan](https://avatars.discourse-cdn.com/v4/letter/q/7ab992/32.png) [@Quiesan](https://forum.ionicframework.com/u/Quiesan)\
**Post date:** [May 3, 2018, 10:23am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/9 "2018-05-03T10:23:35Z")

</div>

Any solution pelase ?

---

<div class="post-metadata">

**Author:** ![ketanyekale](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@ketanyekale](https://forum.ionicframework.com/u/ketanyekale)\
**Post date:** [May 23, 2018, 3:12pm UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/10 "2018-05-23T15:12:33Z")

</div>

If you want something like:

 ![ionselectfor%20color%20and%20images](https://global.discourse-cdn.com/ionicframework/original/3X/b/3/b38b9f3e52660a72c669ff1a27233a1fd2660840.PNG)  
 ![ionselect%20for%20images](https://global.discourse-cdn.com/ionicframework/original/3X/3/a/3a5490cf3beeffe8b81c3598b548d0ece55628c8.PNG)

Please refer my github repository: [https://github.com/ketanyekale/ionic-color-and-image-selector](https://github.com/ketanyekale/ionic-color-and-image-selector)

I needed a color selector couple of months ago but I couldn’t find any. I tried adding CSS classes to ion-select and ion-option but the classes doesn’t get reflected in the generated output. So the only way to apply the custom CSS to ion-select and ion-options is by using the parent element and some JS(/TS).

After implementing the color selector I used the same logic to build image selector.

Hope ionic team can implement this in a better and optimized way and provide an inbuilt option for selecting image and color using ion select.

---

<div class="post-metadata">

**Author:** ![keshavking111](https://avatars.discourse-cdn.com/v4/letter/k/6a8cbe/32.png) [@keshavking111](https://forum.ionicframework.com/u/keshavking111)\
**Post date:** [July 6, 2018, 9:06am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/11 "2018-07-06T09:06:19Z")

</div>

How to get data with api in ionic…like given below  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/6/1/61193ff528e04328a6079f46bfc6ef18b99b1906.jpg)

using api call.

---

<div class="post-metadata">

**Author:** ![RuslanBaryshev](https://avatars.discourse-cdn.com/v4/letter/r/e47774/32.png) [@RuslanBaryshev](https://forum.ionicframework.com/u/RuslanBaryshev)\
**Post date:** [August 15, 2018, 8:26pm UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/12 "2018-08-15T20:26:38Z")

</div>

Html.

```auto
    <ion-select [selectOptions]="selectOptions" [(ngModel)]="courseBegin" interface="popover">
      <ion-option *ngFor="let cc of currencyList" value="{{ cc }}" >
      
        {{ cc }}
      </ion-option>
    </ion-select>

```

Js.

```auto
//Add class
this.selectOptions = {
      cssClass : 'course-popover'
    };
 
    this.currencyList = [
      'RUB',
      'USD',
      'EUR',
      'CHF',
      'GBP',
      'JPY',
      'UAH',
      'KZT',
      'BYN',
      'TRY',
      'CNY',
      'AUD',
      'CAD',
      'PLN',
    ];

```

Scss example:

```auto
$flag-icon-css-path: '../../../assets/images/flag/' !default;

@mixin flag-icon($n, $country) {

  &:nth-child(#{$n}):before {

    @extend .flag-icon-background;
    background-image: url(#{$flag-icon-css-path}#{$country}.svg);

    content: "";
    height: 17px;
    width: 22px;
    position: absolute;
    top: 11px;

  }

}

@mixin flag-icon-current($country) {

  [ng-reflect-model="#{$country}"] .select-text:before {

    @extend .flag-icon-background;
    background-image: url(#{$flag-icon-css-path}#{$country}.svg);

    content: "";
    height: 17px;
    width: 22px;
    position: absolute;
    top: 0px;
    left: 0px;

  }

}

.course-popover {

  .popover-content {

    width: 150px !important;

  }

  ion-list {
    ion-item {

      .label-ios {

        padding-left: 30px;
      }

      position: relative;

      @include flag-icon(1, 'RUB');
      @include flag-icon(2, 'USD');
      @include flag-icon(3, 'EUR');
      @include flag-icon(4, 'CHF');
      @include flag-icon(5, 'GBP');
      @include flag-icon(6, 'JPY');
      @include flag-icon(7, 'UAH');
      @include flag-icon(8, 'KZT');
      @include flag-icon(9, 'BYN');
      @include flag-icon(10, 'TRY');
      @include flag-icon(11, 'CNY');
      @include flag-icon(12, 'AUD');
      @include flag-icon(13, 'CAD');
      @include flag-icon(14, 'PLN');

    }
  }
}

//For style after insertion

  @include flag-icon-current('RUB');
    @include flag-icon-current('USD');
    @include flag-icon-current('EUR');
    @include flag-icon-current('CHF');
    @include flag-icon-current('GBP');
    @include flag-icon-current('JPY');
    @include flag-icon-current('UAH');
    @include flag-icon-current('KZT');
    @include flag-icon-current('BYN');
    @include flag-icon-current('TRY');
    @include flag-icon-current('CNY');
    @include flag-icon-current('AUD');
    @include flag-icon-current('CAD');
    @include flag-icon-current('PLN');

```

---

<div class="post-metadata">

**Author:** ![dunghoang69](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@dunghoang69](https://forum.ionicframework.com/u/dunghoang69)\
**Post date:** [March 12, 2019, 2:52am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/13 "2019-03-12T02:52:07Z")

</div>

Thanks. You’ve save my live 😀😀

---

<div class="post-metadata">

**Author:** ![keshavking111](https://avatars.discourse-cdn.com/v4/letter/k/6a8cbe/32.png) [@keshavking111](https://forum.ionicframework.com/u/keshavking111)\
**Post date:** [April 27, 2019, 2:47pm UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/14 "2019-04-27T14:47:44Z")

</div>

Hi, How to archive , drop-down with image in ionic. please help me.  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/0/d/0dfbafe7d78472faabb4da37c3b66131a2b77506.png)

thanks

---

<div class="post-metadata">

**Author:** ![Rashadab](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rashadab/32/127745_2.png) [@Rashadab](https://forum.ionicframework.com/u/Rashadab)\
**Post date:** [April 4, 2020, 1:56pm UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/15 "2020-04-04T13:56:45Z")

</div>

Have you found out how to make this happen with ion-select-option?

---

<div class="post-metadata">

**Author:** ![TestTech](https://avatars.discourse-cdn.com/v4/letter/t/958977/32.png) [@TestTech](https://forum.ionicframework.com/u/TestTech)\
**Post date:** [April 6, 2020, 5:49am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/16 "2020-04-06T05:49:28Z")

</div>

Have you got desired output?

---

<div class="post-metadata">

**Author:** ![aditbharadwaj](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditbharadwaj/32/124369_2.png) [@aditbharadwaj](https://forum.ionicframework.com/u/aditbharadwaj)\
**Post date:** [April 6, 2020, 6:46am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/17 "2020-04-06T06:46:30Z")

</div>

u can look for possible solution in one of the answers [here](https://forum.ionicframework.com/t/how-to-add-a-flag-icon-in-ion-select-option/186542/15) its the same topic

---

<div class="post-metadata">

**Author:** ![TestTech](https://avatars.discourse-cdn.com/v4/letter/t/958977/32.png) [@TestTech](https://forum.ionicframework.com/u/TestTech)\
**Post date:** [April 7, 2020, 5:08am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/18 "2020-04-07T05:08:29Z")

</div>

Have you got the way how to achieve this?

---

<div class="post-metadata">

**Author:** ![TestTech](https://avatars.discourse-cdn.com/v4/letter/t/958977/32.png) [@TestTech](https://forum.ionicframework.com/u/TestTech)\
**Post date:** [April 7, 2020, 5:10am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/19 "2020-04-07T05:10:51Z")

</div>

Have you got the right answwer?

---

<div class="post-metadata">

**Author:** ![keshavking111](https://avatars.discourse-cdn.com/v4/letter/k/6a8cbe/32.png) [@keshavking111](https://forum.ionicframework.com/u/keshavking111)\
**Post date:** [April 25, 2020, 5:50am UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/20 "2020-04-25T05:50:01Z")

</div>

Hi Everyone , i want to show dropdown with icon display.

```
  <ion-label>Rating</ion-label>

  <ion-select value="all" >

    <ion-select-option value="all">All</ion-select-option>

    <ion-select-option value="one"><ion-icon name="star"></ion-icon></ion-select-option>

    <ion-select-option value="two"><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon></ion-select-option>

    <ion-select-option value="three"><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon></ion-select-option>

    <ion-select-option value="four"><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon></ion-select-option>
    <ion-select-option value="five"><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon><ion-icon name="star"></ion-icon></ion-select-option>

  </ion-select>

</ion-item>

```

---

<div class="post-metadata">

**Author:** ![MuhammadRameez](https://avatars.discourse-cdn.com/v4/letter/m/74df32/32.png) [@MuhammadRameez](https://forum.ionicframework.com/u/MuhammadRameez)\
**Post date:** [August 4, 2020, 5:32pm UTC](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/22 "2020-08-04T17:32:38Z")

</div>

I have created ion-select with image and posted on github have a look

> **[MRameez820/Ion-select-with-image](https://github.com/MRameez820/Ion-select-with-image)**
>
> Ionic 5 ion select dropdown component with image . Contribute to MRameez820/Ion-select-with-image development by creating an account on GitHub.

[Next page](https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972.md?page=2)