How to use svg icon set package from node_modules in angular4? - html

Question

I have found this open source icon package which I installed in my project featherIcons, and is listed inside my_modules directory. However Im trying to use it but I just cant seem to make it work.
The issue is, I think I have to be somehow importing the package but not sure how or where.
app-component.html
<div class="navbar__nav-container">
<ul class="navbar__nav-container__nav-items">
<li>Platform</li>
<li>Stix/Taxi</li>
<li>Menu</li>
<li>
<i data-feather="circle"></i>
</li>
</ul>
</div>
app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { RoutingModule } from './routing.module';
import { SharedModule } from './shared/shared.module';
import { CatService } from './services/cat.service';
import { UserService } from './services/user.service';
import { AuthService } from './services/auth.service';
import { AuthGuardLogin } from './services/auth-guard-login.service';
import { AuthGuardAdmin } from './services/auth-guard-admin.service';
import { AppComponent } from './app.component';
import { CatsComponent } from './cats/cats.component';
import { AboutComponent } from './about/about.component';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
import { LogoutComponent } from './logout/logout.component';
import { AccountComponent } from './account/account.component';
import { AdminComponent } from './admin/admin.component';
import { NotFoundComponent } from './not-found/not-found.component';
#NgModule({
declarations: [
AppComponent,
CatsComponent,
AboutComponent,
RegisterComponent,
LoginComponent,
LogoutComponent,
AccountComponent,
AdminComponent,
NotFoundComponent
],
imports: [
RoutingModule,
SharedModule
],
providers: [
AuthService,
AuthGuardLogin,
AuthGuardAdmin,
CatService,
UserService
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent]
})
export class AppModule { }
Any help would be appreciated

Answer 1

Nevermind, I figured the solution, and I'll post the solution here so that it can help the rest.
So as the library states in the link provided, I had to install it like so
npm install feather-icons --save - the --save is very important because it will be referenced in my package.json. Once installed, you will be able to see it in node_modules directory.
Then in which ever component I want to use the library, all I had to do is import it the following way:
Since I wanted to use an icon from the library in app.component.ts:
app.component.ts
import {Component, OnInit} from '#angular/core';
import { AuthService } from './services/auth.service';
/*
- feather-icons is a directory installed in node_modules.
- I dont have to specify the whole path like '../node_modules/path/to/feather-icons'.
- Also rememeber to call the feather.replace() inside ngOnInit
- because it needs to first make sure the component loads first
*/
import * as feather from 'feather-icons';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor (
public auth: AuthService
) { }
ngOnInit() {
feather.replace();
}
}
Then in my app.component.html:
<div class="navbar__nav-container">
<ul class="navbar__nav-container__nav-items">
<li>Platform</li>
<li>Stix/Taxi</li>
<li>Menu</li>
<li>
<i data-feather="circle"></i>
</li>
</ul>
</div>
This was all to it to be honest.
Hope this helps :)

Answer 2

Solution using angular-feather
The advantage of it being that you cherry pick only the icons that you need, thus reducing bundle size.
Install the package
npm install angular-feather
Import the icons you need
Import the icons a la carte in the angular module of your needs
import { NgModule } from '#angular/core';
import { FeatherModule } from 'angular-feather';
import { Camera, Heart, Github } from 'angular-feather/icons';
// Select some icons (use an object, not an array)
const icons = {
Camera,
Heart,
Github
};
#NgModule({
imports: [
FeatherModule.pick(icons)
],
exports: [
FeatherModule
]
})
export class IconsModule {}
Import IconsModule and use component
<i-feather name="heart"></i-feather>
<i-feather name="camera"></i-feather>
Stackblitz demo