Ionicons: Integrate V5 in angular

Created on 9 Feb 2020  路  11Comments  路  Source: ionic-team/ionicons

Well now v5 didnt have scss so what is the correct way to integrate and consume this in angular ?

picture anthowm
👍4

Most helpful comment

As @bleuscyther mentions, you can integrate the script in your index.html. There are two flaws in my view about this: It is 1) not the Angular way to integrate scripts in index.html and 2) it links an externally hosted script.

Number 2) can be fixed by locally installing Ionicons 5 with npm. But data within node_modules cannot be linked from index.html, so we need a script that copies the whole ionicons folder from node_modules into our application's assets.

This can be achieved as follows by modifying angular.json. Find the assets array in the build and test objects, then add the following lines:

{
  "glob": "**/*",
  "input": "./node_modules/ionicons",
  "output": "./assets/ionicons"
}

Then just link in index.html the right file. It should be: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>

Number 1) seems to be tricky. After following the guide about integrating Stencil into an Angular app, I found that this approach works. Open main.ts in your Angular project and add the following code at the end:

import { applyPolyfills, defineCustomElements } from "ionicons/dist/loader";

applyPolyfills().then(() => {
  defineCustomElements(window, {
    resourcesUrl: "assets/ionicons/"
  });
});

This will basically tell the Ionicons script to look for the svg directory within assets/ionicons/. To be honest I don't know exactly why and I couldn't find documentation about it. Maybe someone from the Ionicon team can tell me if there is a better way to do this.

Anyway, all you then have to do is make sure that the svg directory is actually copied into your assets. I did this with a similar edit in angular.json as in the number 2) above:

{
  "glob": "**/*",
  "input": "./node_modules/ionicons/dist/svg",
  "output": "./assets/ionicons/svg"
 }

This will only copy the svg folder into the assets, because that is all we will need from there.

picture andreas-aeschlimann on 19 Feb 2020
👍4

All 11 comments

In _app.module.ts_

import { NgModule, /** ADD THIS -> **/ CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
    declarations: [...],
    entryComponents: [...],
    imports: [...],
    exports: [...],
    providers: [...],
    schemas: [CUSTOM_ELEMENTS_SCHEMA] /** 馃憟馃徎 ADD THIS **/ 
})
export AppModule {}

in _src\index.html_

<body>
  <app-root></app-root>
  <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</body>

Recompile/ Re-serve

bleuscyther picture bleuscyther on 9 Feb 2020
👍2

Thanks for the answer that works but is there a way to use it this way?
https://stackoverflow.com/questions/60133077/ionicons-version-5-with-angular

anthowm picture anthowm on 10 Feb 2020

While this works, it is not the Angular way to include scripts into index.html. I hope there is a cleaner way.

Does this mean we need to change all to

andreas-aeschlimann picture andreas-aeschlimann on 12 Feb 2020
👍1

As @bleuscyther mentions, you can integrate the script in your index.html. There are two flaws in my view about this: It is 1) not the Angular way to integrate scripts in index.html and 2) it links an externally hosted script.

Number 2) can be fixed by locally installing Ionicons 5 with npm. But data within node_modules cannot be linked from index.html, so we need a script that copies the whole ionicons folder from node_modules into our application's assets.

This can be achieved as follows by modifying angular.json. Find the assets array in the build and test objects, then add the following lines:

{
  "glob": "**/*",
  "input": "./node_modules/ionicons",
  "output": "./assets/ionicons"
}

Then just link in index.html the right file. It should be: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>

Number 1) seems to be tricky. After following the guide about integrating Stencil into an Angular app, I found that this approach works. Open main.ts in your Angular project and add the following code at the end:

import { applyPolyfills, defineCustomElements } from "ionicons/dist/loader";

applyPolyfills().then(() => {
  defineCustomElements(window, {
    resourcesUrl: "assets/ionicons/"
  });
});

This will basically tell the Ionicons script to look for the svg directory within assets/ionicons/. To be honest I don't know exactly why and I couldn't find documentation about it. Maybe someone from the Ionicon team can tell me if there is a better way to do this.

Anyway, all you then have to do is make sure that the svg directory is actually copied into your assets. I did this with a similar edit in angular.json as in the number 2) above:

{
  "glob": "**/*",
  "input": "./node_modules/ionicons/dist/svg",
  "output": "./assets/ionicons/svg"
 }

This will only copy the svg folder into the assets, because that is all we will need from there.

andreas-aeschlimann picture andreas-aeschlimann on 19 Feb 2020
👍4 
import * as icons from 'ionicons/icons';
import { DomSanitizer } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'page-icons',
  templateUrl: './icons.component.html',
})
export class IconsComponent implements OnInit {
  icons: = icons;

  constructor(private domSanitizer: DomSanitizer) {}
}

<img [src]="domSanitizer.bypassSecurityTrustUrl(newIcons.heart)">

But can't control icon's (image) color.

image

surmon-china picture surmon-china on 19 Feb 2020
👍1

The color seems like a separate issue (#784 ) It works for icons that do not have a hard-coded stroke color.

streamliner18 picture streamliner18 on 8 Mar 2020

As @bleuscyther mentions, you can integrate the script in your index.html. There are two flaws in my view about this: It is 1) not the Angular way to integrate scripts in index.html and 2) it links an externally hosted script.

Number 2) can be fixed by locally installing Ionicons 5 with npm. But data within node_modules cannot be linked from index.html, so we need a script that copies the whole ionicons folder from node_modules into our application's assets.

This can be achieved as follows by modifying angular.json. Find the assets array in the build and test objects, then add the following lines:

{
  "glob": "**/*",
  "input": "./node_modules/ionicons",
  "output": "./assets/ionicons"
}

Then just link in index.html the right file. It should be: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>

Number 1) seems to be tricky. After following the guide about integrating Stencil into an Angular app, I found that this approach works. Open main.ts in your Angular project and add the following code at the end:

import { applyPolyfills, defineCustomElements } from "ionicons/dist/loader";

applyPolyfills().then(() => {
  defineCustomElements(window, {
    resourcesUrl: "assets/ionicons/"
  });
});

This will basically tell the Ionicons script to look for the svg directory within assets/ionicons/. To be honest I don't know exactly why and I couldn't find documentation about it. Maybe someone from the Ionicon team can tell me if there is a better way to do this.

Anyway, all you then have to do is make sure that the svg directory is actually copied into your assets. I did this with a similar edit in angular.json as in the number 2) above:

{
  "glob": "**/*",
  "input": "./node_modules/ionicons/dist/svg",
  "output": "./assets/ionicons/svg"
 }

This will only copy the svg folder into the assets, because that is all we will need from there.

When I do this, I do see the icon using <ion-icon name="heart"></ion-icon> but I also get an error inside cli 'ion-icon' is not a known element:

Any idea how to fix it?

codevladimir picture codevladimir on 30 Apr 2020

As @bleuscyther mentions, you can integrate the script in your index.html. There are two flaws in my view about this: It is 1) not the Angular way to integrate scripts in index.html and 2) it links an externally hosted script.

Number 2) can be fixed by locally installing Ionicons 5 with npm. But data within node_modules cannot be linked from index.html, so we need a script that copies the whole ionicons folder from node_modules into our application's assets.

This can be achieved as follows by modifying angular.json. Find the assets array in the build and test objects, then add the following lines:

```

{

"glob": "*/",

"input": "./node_modules/ionicons",

"output": "./assets/ionicons"

}

```

Then just link in index.html the right file. It should be: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>

Number 1) seems to be tricky. After following the guide about integrating Stencil into an Angular app, I found that this approach works. Open main.ts in your Angular project and add the following code at the end:

```

import { applyPolyfills, defineCustomElements } from "ionicons/dist/loader";

applyPolyfills().then(() => {

defineCustomElements(window, {

resourcesUrl: "assets/ionicons/"

});

});

```

This will basically tell the Ionicons script to look for the svg directory within assets/ionicons/. To be honest I don't know exactly why and I couldn't find documentation about it. Maybe someone from the Ionicon team can tell me if there is a better way to do this.

Anyway, all you then have to do is make sure that the svg directory is actually copied into your assets. I did this with a similar edit in angular.json as in the number 2) above:

```

{

"glob": "*/",

"input": "./node_modules/ionicons/dist/svg",

"output": "./assets/ionicons/svg"

}

```

This will only copy the svg folder into the assets, because that is all we will need from there.

When I do this, I do see the icon using <ion-icon name="heart"></ion-icon> but I also get an error inside cli 'ion-icon' is not a known element:

Any idea how to fix it?

Doesn鈥檛 the second post in this issue fix it? It did for me.

andreas-aeschlimann picture andreas-aeschlimann on 30 Apr 2020

Yeah, it worked. But I think this is still not ready for using in the latest angular.

codevladimir picture codevladimir on 2 May 2020
👍1

The solution from @bleuscyther works fine, but mine not, which I consider the same, but from local node_modules:

"scripts": [
  "node_modules/ionicons/dist/ionicons.js"
]

Got this error instead:

GET http://localhost:4200/ionicons/ionicons.esm.js net::ERR_ABORTED 404 (Not Found)
przemekpobuta picture przemekpobuta on 31 May 2020

Just add this to the assets in angular.json, and everything works.

 `{
      "glob": "**/*.svg",
      "input": "node_modules/ionicons/dist/ionicons/svg",
      "output": "./svg"
  },`
Msender picture Msender on 22 Jul 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

arkn98 picture arkn98  路  10Comments
designerdarpan picture designerdarpan  路  4Comments
rashmendis picture rashmendis  路  16Comments
janhaertel picture janhaertel  路  4Comments
Mnilionic picture Mnilionic  路  7Comments