Introduction

In this article, we will learn how to add a country flag icon on a website using Angular and Bootstrap 4.
Prerequisites
  • Node
  • Npm
  • Angular CLI
  • TypeScript
  • Visual Studio Code
Description
Here, I will show you the steps to add country flag icons on our website. Also, we can add flag icons for corresponding countries with languages for translating the website to other languages.
Note
Before going through this session, please visit my previous article related to Angular 7 application.
Step 1
In this step, we need to install the flag icon packages using NPM by using the below command.
npm install flag-icon-css
Step 2
After successful installation, the file structure in the node_modules folder should look like the below image. Here, we can get a collection of all country flags in SVG with the CSS for easier integration.
Steps To AddCountry FlagsIn Angular App Using Bootstrap 4
Step 3
Open the angular.json file and add the path of the flag icon CSS file under the Styles section, as mentioned below.
"node_modules/flag-icon-css/css/flag-icon.min.css"
Step 4
Open the app.component.html file and add the code mentioned below.
Code Ref
  1. <h2>
  2. India flag icon -> <span class="flag-icon flag-icon-in flag-icon-squared"></span>
  3. <br/>
  4. France flag icon -> <span class="flag-icon flag-icon-fr flag-icon-squared"></span>
  5. <br/>
  6. Australia flag icon -> <span class="flag-icon flag-icon-au flag-icon-squared"></span>
  7. <br/>
  8. United Kingdom flag icon -> <span class="flag-icon flag-icon-gb flag-icon-squared"></span>
  9. </h2>

Code Desc

In this section, for using the flags inline with text, add the classes .flag-icon and .flag-icon-xx (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty <span>. If you want to have a squared version flag, then add the class flag-icon-squared. For example, I have added an Indian flag. The ISO 3166-1-alpha-2 code of India is "in" and this code should be case sensitive.
Here is the list of ISO 3166 country codes and flags for future reference.
Country Name ISO 3166 Country Code Country Name ISO 3166 Country Code
AF Afghanistan AF AL Albania AL
DZ Algeria DZ AD Andorra AD
AO Angola AO AG Antigua and Barbuda AG
AR Argentina AR AM Armenia AM
AU Australia AU AT Austria AT
AZ Azerbaijan AZ BS Bahamas BS
BH Bahrain BH BD Bangladesh BD
BB Barbados BB BY Belarus BY
BE Belgium BE BZ Belize BZ
BJ Benin BJ BT Bhutan BT
BO Bolivia BO BA Bosnia and Herz. BA
BW Botswana BW BR Brazil BR
BN Brunei BN BG Bulgaria BG
BF Burkina Faso BF BI Burundi BI
KH Cambodia KH CM Cameroon CM
CA Canada CA CV Cape Verde CV
CF Central African Rep. CF TD Chad TD
CL Chile CL CN China CN
CO Colombia CO KM Comoros KM
CD Congo, The Democr. Rep. of the CD CR Costa Rica CR
CI Cote d'Ivoire CI HR Croatia HR
CU Cuba CU CY Cyprus CY
CZ Czech Republic CZ DK Denmark DK
DJ Djibouti DJ DM Dominica DM
DO Dominican Republic DO TL East Timor TL
EC Ecuador EC EG Egypt EG
SV El Salvador SV GQ Equatorial Guinea GQ
ER Eritrea ER EE Estonia EE
ET Ethiopia ET FJ Fiji FJ
FI Finland FI FR France FR
PF French Polynesia PF GA Gabon GA
GM Gambia, The GM GE Georgia GE
DE Germany DE GH Ghana GH
GI Gibraltar GI GR Greece GR
GL Greenland GL GD Grenada GD
GP Guadeloupe GP GT Guatemala GT
GN Guinea GN GW Guinea-Bissau GW
GY Guyana GY HT Haiti HT
HN Honduras HN HK Hong Kong SAR HK
HU Hungary HU IS Iceland IS
IN India IN ID Indonesia ID
IR Iran IR IQ Iraq IQ
IE Ireland IE IL Israel IL
IT Italy IT JM Jamaica JM
JP Japan JP JO Jordan JO
KZ Kazakhstan KZ KE Kenya KE
KI Kiribati KI KP Korea, North KP
KR Korea, South KR KW Kuwait KW
KG Kyrgyzstan KG LA Laos LA
LV Latvia LV LB Lebanon LB
LS Lesotho LS LR Liberia LR
LY Libya LY LI Liechtenstein LI
LT Lithuania LT LU Luxembourg LU
MO Macau SAR MO MK Macedonia MK
MG Madagascar MG MW Malawi MW
MY Malaysia MY MV Maldives MV
ML Mali ML MT Malta MT
MH Marshall Islands MH MQ Martinique MQ
MR Mauritania MR MU Mauritius MU
MX Mexico MX FM Micronesia, Fed. States of FM
MD Moldova MD MC Monaco MC
MN Mongolia MN ME Montenegro ME
MA Morocco MA MZ Mozambique MZ
MM Myanmar MM NA Namibia NA
NR Nauru NR NP Nepal NP
NL Netherlands NL NC New Caledonia NC
NZ New Zealand NZ NI Nicaragua NI
NE Niger NE NG Nigeria NG
MP Northern Mariana Islands MP NO Norway NO
OM Oman OM PK Pakistan PK
PW Palau PW PS Palestinian Territories PS
PA Panama PA PG Papua New Guinea PG
PY Paraguay PY PE Peru PE
PH Philippines PH PL Poland PL
PT Portugal PT PR Puerto Rico PR
QA Qatar QA RE Réunion RE
RO Romania RO RU Russian Federation RU
RW Rwanda RW KN Saint Kitts and Nevis KN
LC Saint Lucia LC WS Samoa WS
SM San Marino SM ST Sao Tome and Princ. ST
SA Saudi Arabia SA SN Senegal SN
RS Serbia RS SC Seychelles SC
SL Sierra Leone SL SG Singapore SG
SK Slovakia SK SI Slovenia SI
SB Solomon Islands SB SO Somalia SO
ZA South Africa ZA ES Spain ES
LK Sri Lanka LK VC St Vincent and Gren. VC
SD Sudan SD SR Suriname SR
SZ Swaziland SZ SE Sweden SE
CH Switzerland CH SY Syria SY
TW Taiwan TW TJ Tajikistan TJ
TZ Tanzania TZ TH Thailand TH
TG Togo TG TO Tonga TO
TT Trinidad and Tobago TT TN Tunisia TN
TR Turkey TR TM Turkmenistan TM
TV Tuvalu TV UG Uganda UG
UA Ukraine UA AE United Arab Emirates AE
GB United Kingdom GB US United States US
UY Uruguay UY UZ Uzbekistan UZ
VU Vanuatu VU VA Vatican City VA
VE Venezuela VE VN Vietnam VN
VG Virgin Islands, British VG VI Virgin Islands, U.S. VI
EH Western Sahara EH YE Yemen YE
ZM Zambia ZM ZW Zimbabwe ZW

OUTPUT
Steps To AddCountry FlagsIn Angular App Using Bootstrap 4
Step 5
In this step, we should apply this flag icon in our previous Angular 7 series application. Open the home.component.html file and add code as mentioned below.
<h1>Satyaprakash Samantaray <span class="flag-icon flag-icon-in flag-icon-squared"></span></h1>
OUTPUT
Steps To AddCountry FlagsIn Angular App Using Bootstrap 4

Summary

In this article, we have learned:
  • Steps to add flag icon in Angular app;
  • Scenarios where we can implement this in our project
  • List of ISO 3166 country codes and flags
  • Customization of country flags in SVG with CSS after installation