How To Add Country Flags Icon In Angular Using Bootstrap

Here, we will learn about how to add countries flag in Angular. We have sometime this kind of requirements where we need to add the countries flag, so we use the images for it. But we can use the flag-icon-css for it, and it will make our task easy.

Roadmap for developing the application:

  • Installing the Node Package.
  • Adding the CSS to angular.json file
  • Use the different classes for flag.

Let’s begin with it.

Installing the Node Package

You can use the following command to install the package. You can take a look at official documentation for more information from here.

Command for installing the package:

npm install flag-icon-css

Adding the CSS to angular.json file

Now, the package is installed and we have to provide the reference in angular.json file. Open the angular.json file and add the reference in css section in it.

"node_modules/flag-icon-css/css/flag-icon.min.css"

npm-flag-css

Use the different classes for flag.

Now, open the app.component.html file and add the following code in it.

<div class="container"> 
        <div class="row"> 
             <div class="col-md-5"> 
                      <ul> 
                             <li> India <span class="flag-icon flag-icon-in flag-icon-squared"></span> </li> 
                             <li> United Kingdom <span class="flag-icon flag-icon-gb flag-icon-squared"></span> </li> 
                      </ul> 
             </div> 
        </div> 
</div>

That’s it. Let me know if you face any difficulties.

Submit a Comment

Your email address will not be published. Required fields are marked *

Footer Logo

Subscribe

Select Categories