# How can I add a flag to ion-select or ionic-selectable?

**URL:** <https://forum.ionicframework.com/t/how-can-i-add-a-flag-to-ion-select-or-ionic-selectable/178160>\
**Category:** Ionic Framework\
**Created:** [November 22, 2019, 7:27am UTC](https://forum.ionicframework.com/t/how-can-i-add-a-flag-to-ion-select-or-ionic-selectable/178160 "2019-11-22T07:27:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![melnahas](https://avatars.discourse-cdn.com/v4/letter/m/58956e/32.png) [@melnahas](https://forum.ionicframework.com/u/melnahas)\
**Post date:** [November 22, 2019, 7:27am UTC](https://forum.ionicframework.com/t/how-can-i-add-a-flag-to-ion-select-or-ionic-selectable/178160/1 "2019-11-22T07:27:37Z")

</div>

I want to use the [https://github.com/lipis/flag-icon-css](https://github.com/lipis/flag-icon-css) with ionic-select and [https://www.npmjs.com/package/ionic-selectable](https://www.npmjs.com/package/ionic-selectable). I have tried many methods after I installed the packages as I show in my code but it did still does not show me the flag either way. What are the steps I need to take to make it work?

ionic\_select.html

```auto
<ion-select #select1 [(ngModel)]="selectedCode"> 
<ion-select-option *ngFor="let c of countries" value="{{c.flag}}{{c.code}}">{{c.flag}}{{c.name}}</ion-select-option> 
</ion-select> 

```

ionic\_select.ts

```auto
countries: any = [ { code: '+93', name: 'Afghanistan', flag: './assets/flags/af.png' }, 

```

ionic\_selectable.html

```auto
<ion-item>  
<ionic-selectable item-content [(ngModel)]="port" [items]="ports" itemTextField="country" [canSearch]="true" (onChange)="portChange($event)"    
</ionic-selectable> 
<span class="flag-icon flag-icon-{flag}"></span>  
</ion-item> 

```

ionic\_selectable.ts

```auto
class country { 
public country: string; 
public flag: string;  
} 
export class Classname {   
ports: country[];    
port: country;
constructor(){    
this.ports = [{country: 'afghanistan', flag: './assets/flags/af.png}],  
}

```