How To: Add Govicons to Angular CLI

Gov Icons gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Create a new project and navigate into the project...

ng new my-app
cd my-app

Install the govicons library and add the dependency to package.json...

npm install --save govicons

Using CSS

To add Gov Icons CSS icons to your app...

// in angular.json
"build": {
  "options": {
    "styles": [
      "../node_modules/govicons/css/govicons.css",
      "src/styles.css"
    ],
  }
}

Or insert into your style.css

@import '~govicons/css/govicons.css';

Using SASS

Create new project with SASS:

ng new cli-app --style=scss

To use with existing project with CSS:

1. Rename src/styles.css to src/styles.scss
2. Change angular.json to look for styles.scss instead of css:

// in angular.json
"build": {
  "options": {
    "styles": [
      "src/styles.scss"
    ],
  }
}

Make sure to change styles.css to styles.scss.

Create an empty file _variables.scss in src/.

Add the following to _variables.scss:

$gi-font-path : '../node_modules/govicons/fonts';

In styles.scss add the following:

@import 'variables';
@import '../node_modules/govicons/scss/govicons';

Test

Run ng serve to run your application in develop mode, and navigate to http://localhost:4200. To verify Gov Icons has been set up correctly, change src/app/app.component.html to the following...

<h1> {{title}} <i class="gi gi-tank"></i></h1>

After saving this file, return to the browser to see the Gov Icons icon next to the app title.