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 =)

Answer 2

The following command will allow you to use the ion-* classes and the <ion-icon name="..."></ion-icons> web component that's available with Ionicons 4.x:

ng add @ionic/angular

This is a built-in Angular schematic that installs the Ionic library and it's components, which includes icons. Once this complete you can use Ionicons in your project like this:

<ion-icon name="logo-facebook"></ion-icon>

The name property corresponds to the value provided in the Web Component Code provided for a specific icon at ionicons.com.

Answer 3

Probably you got your answer already but here how i added in my project:

1. Add ionicons to your project

   npm install ionicons@'2.0.1' --save

   or add following in package.json

   "dependencies": {

   "ionicons": "2.0.1",

   }

2. Then add the css or sass file in the angular-cli.json to be loaded into your application.

   "styles": [

   "../node_modules/ionicons/scss/ionicons.scss"

   ]

   Note: The path might change depending on the version your are going to install. For the version mention above this is the path.

3. Now you should be good to go.

   class="ion-trash-a"