> For the complete documentation index, see [llms.txt](https://angularactivity.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://angularactivity.gitbook.io/project/angular-7-flag-icon-css.md).

# Angular 7 - Flag Icon CSS

In this article, we'll see how to setup Flag Icon CSS in Angular 7.

![Angular 7 - Flag Icon CSS](https://3664850746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LOwWulv1WImTywA9fkU%2F-LOxINQXy5XKHH8isUrG%2F-LOxIRNv0iPpZwMNTdBs%2FA7-FlagIconCss.png?alt=media\&token=7c0207bb-1b40-4e84-8956-90f10c9f338e)

🎬Video version: <https://www.youtube.com/watch?v=JnX6hgWNnb8>

## Step 0 <a href="#step-0" id="step-0"></a>

**Installing angular-cli**

> *Note*: you can skip this part if you already have application generated

```
sudo npm i -g @angular/cli@next
ng new angular7app
cd angular7app
```

## Step 1 <a href="#step-1" id="step-1"></a>

* Install `flag-icon-css`

```
  npm install flag-icon-css --save
```

## Step 2 <a href="#step-2" id="step-2"></a>

* Open `angular.json` and insert a new entry into the styles array:

```
      "styles": [        
            "node_modules/flag-icon-css/css/flag-icon.min.css", 
            "styles.css",      
       ],
```

## Step 3 <a href="#step-4" id="step-4"></a>

* Open `src/app/app.component.html` and add:

```
<span class="flag-icon flag-icon-gr"></span>
```

## Step 4  <a href="#step-5" id="step-5"></a>

* Launch the application:

```
ng serve -o
```

![](https://3664850746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LOwWulv1WImTywA9fkU%2F-LOxNt9OBNl5lVZPGrEC%2F-LOxO-WfesFqO_rJcG-B%2FScreenshot%202018-10-16_10-59-21.png?alt=media\&token=cbf408ed-2d5e-4302-ac79-84d2ee4d27e3)