Steps To Add 📎 Country Flags 🏁 In Angular App Using Bootstrap 4

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.

• Steps To Build 🏗️ Angular 7 (Beta) Desktop 🖥️ Apps With Electron

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.

 

 

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

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

OUTPUT

 

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

 

 

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