Simple Steps to Add Country Flags to Your Angular, React, or Vue Applications

In this article, I will show you how you can incorporate the flags using the CSS approach to your Angular, Vue, or React applications. You just need to pass on the respective ISO country code in the CSS class as it has embedded images. Follow the below-given steps to add country icons to your web application.

You can see the live demo here.

Where can you use country icons?

You can use country flag icons for various purposes! for example, to show…

• The user country, show where he belongs to!
• Phone/Contact dropdowns
• Show country icon beside the IP address
• While capturing user address information
• Show user profile with their country
• Multilingual language applications switch/Translating languages

Basic Requirements

• Node and NPM manager
• Angular CLI
• Typescript
• VSCode Editor/Your favorite IDE
• flag-icon-css npm package (Third-party library)

Steps to incorporate country flag to your application

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.

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.

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.

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.

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?

Output:

Wrapping up

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)

If you want to see all country codes, check this out.

References:

• Node JS & Npm Manager
• Angular CLI
• npm/flag-icon-css (Third-party library)
• Stackblitz — to prepare the demo

Get my stories in your feeds by subscribing to me, or become a member to read all stories of thousands of other writers, participate in all challenges and get a payout with low fees and less payout threshold on Vocal Media.

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 costs, So I can bring up innovative, knowledgeable things as always.

Disclaimer: In this article, I used vocal plus membership links, I will get a small commission when you become a member through my link.

© Originally published at 9Mood, also republished at Medium by Author Rakshit Shah.