Does laravel 9 supports bootstrap 5 icons?

Question

This is my composer.json file of laravel 9 project

 "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "bootstrap-icons": "^1.10.3",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.56.1",
        "vite": "^4.0.0"
    },

This is my resoures/js/app.js file

import './bootstrap'
import '../sass/app.scss'
import * as bootstrap from 'bootstrap'
import '~bootstrap-icons/font/bootstrap-icons.css'

this is my resources/sass/app.scss

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';
@import '~bootstrap-icons/font/bootstrap-icons.css';

Now, my view has bootstrap icons class but icons are not being seen in browser.

<i class="fs-4 bi-speedometer2">
<i class="fs-4 bi-house">

I am not seing any icons in my browser

Answer 1

Laravel 9 does not come with built-in support for Bootstrap 5 icons. However, you can easily add Bootstrap 5 icons to your Laravel 9 application by installing the necessary dependencies and configuring your project accordingly.

Add the Bootstrap icons package to your project by running the following command:

composer require twbs/bootstrap-icons

After installing the package, you'll need to import the icons in your project's app.scss file.

@import "~twbs/icons/scss/icons";

To use the icons, you can use the bi class provided by the package.

<i class="bi bi-search"></i>

If you want to use javascript icons you need to import the icons in your app.js file and use the icons() method provided by the package.

import 'twbs/icons';

icons();

You can also use the icons with svg format if you need it.

<svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
  <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
</svg>