How to use ionicon in Angular component?

Question

I'm trying to add ionicons to my Angular 4 app. Here are the steps taken:

1. In http://ionicons.com/ I downloaded the zip file and extracted it.
2. I created a new folder in my Angular project named icons
3. I dragged the ionicon.min.css file and the fonts folder from the unzipped package into my new icons folder.
4. In the project's index.html file, I added the css file.
5. Now in the footer component I've created beforehand, I'm trying to use the icons.
6. I get a server error regarding my path in the index.html file.

Am I missing somrthing?

Answer 1

The way to get ionicons in angular 6.3.x and npm 6.1.x working ...

1. Open your project folder, open a command line tool of your choice with npm support and call npm install ionicons@latest --save
2. Make sure that something similar to "ionicons": "^4.2.4" will automatically appear in your project dependencies in your package.json
3. Add "node_modules/ionicons/dist/scss/ionicons.scss" under "styles": [] section inside your angular.json
4. Add <span class="ion ion-md-attach"></span> in your app.component.html or index.html or any markup file of your choice
5. Enjoy =)