# Install glyphicon library in Angular 15.x

**URL:** https://forum.codewithmosh.com/t/install-glyphicon-library-in-angular-15-x/17819
**Category:** Angular
**Created:** [January 20, 2023, 5:30pm UTC](https://forum.codewithmosh.com/t/install-glyphicon-library-in-angular-15-x/17819 "2023-01-20T17:30:26Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![stevenong\_2006](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@stevenong\_2006](https://forum.codewithmosh.com/u/stevenong_2006)
#### Post date: [January 20, 2023, 5:30pm UTC](https://forum.codewithmosh.com/t/install-glyphicon-library-in-angular-15-x/17819/1 "2023-01-20T17:30:26Z")

</div>

Hi all,

I just signed up for the “Angular 4: Beginner to Pro” recently. While most of the lessons are still relevant, I found the lessons involved using the glyphicon library (i.e., bootstrap 3.x) no longer work since the glyphicon library was not included in the current bootstrap library. After sometime searching, I’ve found a work around that allow me to install and use glyphicon in Angular 15.x to continue with Mosh’s lessons.

First of all, this is my environment:

```auto
    Angular CLI: 15.0.4
    Node: 18.12.1
    Package Manager: npm 8.19.2
    OS: win32 x64
    
    Angular:
    ...
    
    Package Version
    ------------------------------------------------------
    @angular-devkit/architect 0.1500.4 (cli-only)
    @angular-devkit/core 15.0.4 (cli-only)
    @angular-devkit/schematics 15.0.4 (cli-only)
    @schematics/angular 15.0.4 (cli-only)

```

Here are the steps for this work around…

**1. Installing bootstrap & bootstrap-icon**

```auto
    npm i boostrap@3 bootstrap-icons@1 --save

```

… This is what I found in "package-lock.json:

```auto
...
        "bootstrap": "^3.4.1",
        "bootstrap-icons": "^1.10.3",
...

```

**2. Setup global styles import bootstrap**  
Add these lines to the top of ‘src/styles.css’

```auto
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-icons/font/bootstrap-icons.css";

```

**3. Start using glyphicon**  
For example, I’ve created a module called ‘favorite’ and in ‘favorite.component.html’ I have:

```auto
      <span class="glyphicon glyphicon-heart"></span>

```

… in ‘app.component.html’, I have:

```auto
      <favorite></favorite>

```

It produces:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/d/d3ef8f8b971311517bf3622c76e9c391c939a0f6.png)

This work around helps me to resolve the issues with glyphicon, so I can continue with Mosh’s Angular lessons. I hope it’ll help.

Many cheers.