Guide to incorporating Bootstrap icons into an Angular application through programming techniques

Have you checked out the official bootstrap documentation for information on how to use their icons?

https://i.stack.imgur.com/N4z2R.png

I'm currently trying to understand the package and its usage. However, none of the options in the documentation mention anything about the specific package I was instructed to install just moments ago.

It seems confusing that the documentation would recommend installing the package if all I have to do is copy the necessary SVGs and then uninstall it.

Is there a way for me to import an icon into an Angular component while maintaining proper source control practices?

In response to not using the recommended HTML provided in an answer: 

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>

The reason for not using this example is that it does not utilize the bootstrap icon library. It's pasted here as a demonstration because stack overflow itself doesn't make use of Bootstrap icons.

https://i.stack.imgur.com/5GYkx.png

angulartypescriptbootstrap-4icons

Answer №1

Although this solution may be outdated, I encountered the same issue and found that the existing answers were not helpful. Here is the unique solution I came up with:

To begin, install the bootstrap icons package using npm (--save will also add it to your project dependencies):

$ npm i bootstrap-icons --save

Next, include this line in your styles.css file:

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

From this point forward, you can easily utilize the Bootstrap icons anywhere within your application as outlined in the bootstrap documentation:

<i class="bi bi-star-fill"></i>

Answer №2

*Recently updated as of version v1.2.0, we have now included Icon fonts. Make sure to check out the solution suggested by @BBoom.

To incorporate the icons, you can either copy the bootstrap-icons.svg file or the icons/*.svg files manually. If you choose to copy them to the root directory, you can use the following code snippet:

  <svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="bootstrap-icons.svg#heart-fill"/>
  </svg>

If you decide to copy them to the assets folder instead, you can use this code:

  <svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="assets/bootstrap-icons.svg#heart-fill"/>
  </svg>

In order to make Angular handle the file copying process for you, you need to modify the angular.json file. By adding the necessary configuration under "assets", Angular will automatically copy the files for you. For example:

   "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "glob": "bootstrap-icons.svg",
        "input": "./node_modules/bootstrap-icons/",
        "output": "/",
      }
    ],

By specifying a different glob pattern, you can control where Angular copies the files to. As an illustration:

  {
    "glob": "*.svg",
    "input": "./node_modules/bootstrap-icons/icons/",
    "output": "/assets/img/",
  }

This setup would result in Angular copying all *.svg files from the specified directory to 'assets/img', allowing you to use them like so:

 <img src="assets/img/shop.svg" alt="" width="32" height="32">

Answer №3

It’s effective for my needs

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
            ],

Insert this code snippet into your angular.json file

Answer №5

I successfully implemented the sprite by following these steps:

npm install --save bootstrap-icons

Next, I updated the ./angular.json file in the assets section with the following code:

{
  "glob": "*.svg",
  "input": "./node_modules/bootstrap-icons/",
  "output": "/b-icons/"
}

Afterwards, I was able to easily add icons to my template like so:

<svg class="bi" width="32" height="32" fill="currentColor">
 <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

This setup worked flawlessly for Angular v11.1.0 and bootstrap-icons v1.3.0.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2 does not allow access to the getSize() properties while using Protractor

I have been utilizing the Angular2 Go Protractor setup in an attempt to conduct end-to-end tests on Angular 2. While attempting to retrieve the size of an element, I have encountered issues with the properties not being accessible. For instance: var myEl ...

seleniumangularprotractor

Try querying again if you receive no results from an http.get request in Angular using RXJS Operators

In my Angular service, I sometimes encounter an issue where I receive an empty array. In such cases, I would like to trigger a fresh query. let request = this.http.post(this.searchlUrl, payload).pipe( retryWhen(errors => errors.pipe(delay(100 ...

angulartypescripthttprxjs

Encounter the error message "Unable to resolve all parameters" after including the Interceptor

Currently, I am in the process of implementing HttpInterceptor functionality. However, upon adding it to @NgModule, I encountered the following error message in Chrome: Uncaught Error: Can't resolve all parameters for JwtInterceptor: (?, ?). at s ...

angular

Creating a class and initializing it, then implementing it in other classes within an Angular application

Trying to grasp some angular fundamentals by creating a class structure. Unsure if this is the right approach. export class Cars{ Items:Car[]=[]; constructor() { this.Items = [ { id: "1", name: "Honda" ...

angulartypescript

When using console.log in Angular, it displays an object as [object Object]

After receiving advice, I decided to implement a template driven form. However, when I try to log the userForm.value in the console, all I get is " [object Object] ". Can someone please point out what mistake I might be making? <form *ngIf="data" #us ...

formsangularradio-button

Is it possible to eliminate additional properties from an object using "as" in Typescript?

I am looking for a way to send an object through JSON that implements an interface, but also contains additional properties that I do not want to include. How can I filter out everything except the interface properties so that only a pure object is sent? ...

javascripttypescript

Dynamic getter/setter in Typescript allows for the creation of functions

I'm facing a challenge in making Typescript automatically infer types for dynamically created getter and setter functions. In my code, I have a class called MyClass which contains a map of containers: type Container = { get: () => Content s ...

typescriptaccessor

Angular 17 presents a unique challenge regarding APP_INITIALIZER and Server-Side Rendering (

Hello everyone, I've run into an issue while attempting to transition to SSR in Angular 17 from my current client-only setup in Angular 16. I have two services in play - CiyuanEnvironmentService and LiveService. The LiveService relies on the environme ...

angularangular-universal

Angular2: Property binding authorization is not implemented in any directive within an embedded template

I created a directive in Angular 2, but it is not working and returning a template parse error. Directive code : import { Directive, Input } from '@angular/core'; import { TemplateRef, ViewContainerRef } from '@angular/core'; import { ...

angularangularjs-directive

Leverage the VTTCue Object in an Angular2 project using Typescript

I am looking to dynamically load subtitles onto a video. let subs:TextTrack = video.addTextTrack('subtitles'); for (let dataSrt of dataSrts) { let cue: any = new VTTCue( dataSrt['startTime'], da ...

angulartypescriptnpm

Dispatch a websocket communication from a synchronous function and retrieve the information within the function itself

I am currently working on an Angular project and need guidance on the most effective approach to implement the following. The requirement is: To retrieve an image from the cache if available, otherwise fetch it from a web socket server. I have managed ...

typescriptwebsocketasync-awaitangular6rxjs6

Utilizing the [innerHTML] attribute within the <mat-select><mat-option> tags

I have integrated the use of [innerHTML] within <mat-option> in <mat-select>, which displays correctly in the drop-down list but not for the selected value. Versions: Browser Google Chrome 68.0.3440.106 (Official Build) (64-bit) Angular 6.1 ...

angularbootstrap-4angular-material

Using TypeScript with React and Redux to create actions that return promises

Within my React application, I prefer to abstract the Redux implementation from the View logic by encapsulating it in its own package, which I refer to as the SDK package. From this SDK package, I export a set of React Hooks so that any client can easily u ...

javascriptreactjstypescriptredux

Tips for Angular 14: How to clearly define a form control as not being undefined

Consider a scenario with a form setup like this: searchForm = new FormGroup({ SearchBox = new FormControl<string>('', {nonNullable: true}); )} Now, when attempting to extract the value from the form field using this code snippet: thi ...

angularangular14

How to form an array using rxjs before the adding sequence is completed

I am currently exploring a way to utilize rxjs to achieve the following scenario: You have two observables, onAddObs and onRemoveObs. Assume that onAddObs.next() is triggered multiple times, adding "A", "B", "C". I aim to then extract ["A", "B", "C"]. .t ...

javascriptangularrxjs

I'm attempting to retrieve an image from the database to display in the modal, but unfortunately the image isn't appearing as expected within the modal

I have the following code snippet for fetching an image: <img src="pics/file-upload-image-icon-115632290507ftgixivqp.png" id="image_preview1" class="img-thumbnail" style="margin-top: 15px; height:50%; width:20%"&g ...

phpjqueryangulardatabaseimage

Obtain values from a specific set, and then filter out values from an array that correspond to the index of that set into distinct arrays

The Problem I'm Facing Currently, I am dealing with a large data table that contains a mix of relevant and irrelevant data. My goal is to filter out the information I care about and display it in a more concise table. Using RegEx, I have managed to i ...

javascriptarraysangulartypescriptset

The input field cannot be accessed via touch on mobile devices

<div class="form-group row pswrd" style="padding: 0px 10px"> <div id="email" class="col-md-12 col-xs-12"> <input type="password" class="form-control c_fname" id="c" #pswd name="password" placeholder="password" [(ngModel)]="user.passwor ...

htmlcssangular

Blank area located at the bottom of the document

I'm having trouble designing a webpage without a scroll bar because there isn't much content to display on the page. I've tried searching for solutions and following steps to fix the issue, but I haven't had any success. If anyone can a ...

javascripthtmljquerycssbootstrap-4

Passing an object from an Angular application to a backend server in Node.js using the

I have a YAML file with the following structure: Layouts: - Name: Default Layout LayoutId : 1 ConfiguredSegments: LiveA : Height : 100 Id : LiveA Ref1A : ...

node.jsangularjsangularhttp