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"

Answer 4

Please allow me to summarize the working approaches as of September 2020 and also provide a third bonus approach :)

Option 1: Include the Ionic library in your package.json As others have mentioned, the problem is that we would be including the whole IONIC library to end up using only the icons. Here's how

ng add @ionic/angular

Option 2: Use the Icon library directly as a WebComponent. By using this way, the <ion-icon> component is registered so that it can be used even in vanilla javascript. This can be achieved by simply adding the following script to your index.html

<script type="module" src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.esm.js"></script>

Then you can use the <ion-icon> WebComponent inside your templates like

<ion-icon name="heart"></ion-icon>

By the way, you should also add schemas: [CUSTOM_ELEMENTS_SCHEMA] to your app.modules.ts configuration to avoid Angular complaining that 'ion-icon' is not a known element.

Bonus (if you are using Angular Material): The material icons aren't bad, but I particularly like the Ionic ones, especially their outline variant. It may seem a little "hacky" but there's a way to use IONIC icons using mat-icon The idea is to use MatIconRegistry to register the IONIC icons as part of Angular Material. If you only want to use two or three icons it's easy, in fact, there are some posts written about it here https://riptutorial.com/angular-material2/example/32566/using-svg-icons and here https://dev.to/elasticrash/using-custom-made-svg-icons-through-the-angular-material-library-2pif

However for those who need all the icons this method is not scalable, there is however another way to "feed" the MatIconRegistry using matIconRegistry.addSvgIconSetInNamespace The documentation is few but basically what we need is an SVG container with all the Ionic icons within (aka SVG Sprite)

The requirements are:

1. Ionicons installed and part of your package.json
2. A script that runs after every npm install and generates the sprite
3. The code needed to register the Sprite in the MatIconRegistry
4. Style Adjustments

For the first point just run npm i ionicons . For the second one, make sure to save to following script to the root of your project, I named it postinstall.js but you are free to choose the name you want. Also, add the svgstore package to your dev dependencies by running npm i svgstore -D

// postinstall.js

const fs = require('fs');
const path = require('path');
const svgstore = require('svgstore');

const normalizePath = (folderPath) => path.resolve(path.normalize(folderPath));
const SVG_INPUT_FOLDER = normalizePath('node_modules/ionicons/dist/ionicons/svg');
const SPRITE_OUTPUT_FOLDER = normalizePath('src/assets/images/');
const GENERATED_SPRITE_NAME = path.join(SPRITE_OUTPUT_FOLDER, 'ionic-icons.svg');

const sprite = svgstore();
console.log('Generating SVG Sprite');
fs.readdir(SVG_INPUT_FOLDER, function (err, files) {

  if (err) {
    return console.log('Ups, there was an error reading the Directory: ' + err);
  }
  files
    .filter(el => /\.svg$/.test(el))
    .forEach((file) => {
      sprite.add(file.replace('.svg', ''), fs.readFileSync(`${SVG_INPUT_FOLDER}/${file}`, 'utf8').replace(/<title.*>.*?<\/title>/ig, ''));
    });
  fs.writeFileSync(GENERATED_SPRITE_NAME, sprite);
  console.log('Sprite generated successfully');
});

This script reads all the SVGs contained in the node_modules/ionicons/dist/ionicons/svg folder and saves the sprite as src/assets/images/ionic-icons.svg . As I said before this script shall run during every npm install , this can be achieved by simply editing your package.json file and adding "postinstall": "node postinstall.js" in the scripts section.

Almost there: Registration of the Sprite using MatIconRegistry . In my case, I have decided to create a module named Material and then import it into the app.module.ts

// material.module.ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@NgModule({
  declarations: [],
  exports: [MatIconModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: configureMatIconRegistry,
      multi: true,
      deps: [MatIconRegistry, DomSanitizer]
    }
  ]
})
export class MaterialModule {}

export function configureMatIconRegistry(
  matIconRegistry: MatIconRegistry,
  domSanitizer: DomSanitizer
): () => Promise<void> {
  return (): Promise<any> => {
    matIconRegistry.addSvgIconSetInNamespace(
      'ionicon',
      domSanitizer.bypassSecurityTrustResourceUrl('assets/images/ionic-icons.svg')
    );
    return Promise.resolve();
  };
}

The relevant part is the configureMatIconRegistry but I think is self-explanatory.

Last but not least: Styles Our mat-icon is ready to be used like this:

<mat-icon svgIcon="ionicon:heart-outline"></mat-icon>

But, due to the way these icons are created (I mean the original SVGs) we need some style adjustments. Just make sure to put this in your global styles to target all mat-icons across the app, don't worry "regular" Material mat-icons will remain unchanged.

// styles.scss
 .mat-icon {
      &[data-mat-icon-namespace="ionicon"] {
        display: inline-block;
        width: 24px;
        height: 24px;
        font-size: 24px;
        line-height: 24px;
        contain: strict;
        fill: currentcolor;
        box-sizing: content-box !important;
        svg {
          stroke: currentcolor;
    
          .ionicon {
            stroke: currentColor;
          }
    
          .ionicon-fill-none {
            fill: none;
          }
    
          .ionicon-stroke-width {
            stroke-width: 32px;
          }
        }
        .ionicon,
        svg {
          display: block;
          height: 100%;
          width: 100%;
        }
      }
    }

And that's pretty much it! Now, with every npm install you will have all the Ionic Icons ready to be used with the <mat-icon>