Easy Steps to Integrate Country Flag Icons in Angular, Vue, and React

Step 1: Install third-party library to your angular project

You need to hit the below command to your angular project root directory.

npm install flag-icon-css

Step 2: Set path of flag-icon-css to your angular.json > CSS section

Under styles array, you can mention the flag-icon.min.css file as shown below. Then restart your angular project.

...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"styles": [
...
"src/assets/font-awesome/css/font-awesome.min.css",
              "node_modules/flag-icon-css/css/flag-icon.min.css"
],
...

Alternatively, you can put your package build into your assets folder in this manner. You need to add a link tag to your index.html, or angular.json > styles array to reflect the changes.

...
-flag-icon-css
|- assets
|- css
|- flag-icon.css
|- flag-icon.min.css
|- flags
|- 1x1
|- 4x3
...

Here you will get a collection of all country flags in SVG file format compatible with CSS, which will be definitely easy for integration.

Step 3: Implement CSS class to your HTML component file

Open your app.component.ts file where you want to put country flag icons and add the following code as given below.

India 

Please make sure that the value of the ISO country code must be in lower case. For your angular application if you have country codes in UPPERCASE, So use the following line.

India 

In such way, you can implement the CSS classes to show the country flags within 5 minutes for sure.

Code explanation:

As you can see in the above code, the main thing is CSS class flag-icon-xx , where xx is the universal ISO country code in lower case.

This library also provides rectangle and square versions of each country flag. You can make your flag look like a square by using class flag-icon-squared .

Isn’t it so simple?

Hope you find the article more helpful for you, instead of saving and storing all country flags to a physical location or on a Database, use this approach, it is a more convenient and effective way!

What do you learn from this article?

• Add country flags in your application within 5 minutes.
• Where and How can you utilize such an amazing feature.
• Country flag customization and their usage
• List of countries and their ISO Codes (Which are in use globally for all countries)

Hope you like my work. You can see the live demo here.

You can also support my work with a donation — If you want to donate me however much you can afford, it means and helps more than you can imagine. You can give tips too using Buy me a coffee. The donation amount will help me to run the website, and server, So I can bring up innovative, knowledgeable things as always.

References:

1. Node JS & Npm Manager 
2. Angular CLI
3. npm/flag-icon-css (Third-party library)
4. Stackblitz — to prepare the demo (bootstrap country flags)