Add Bootstrap Icons to a Blazor .NET Web App

In this blog post, we’ll show you how to add Bootstrap Icons to a Blazor .NET Web App to create visually appealing and consistent UI elements.

Bootstrap Icons is a free, open-source library that provides over 1,800 scalable vector icons designed to integrate seamlessly with Bootstrap-based interfaces. These icons are available in SVG format, making them lightweight, customizable, and perfect for use in modern frameworks like Blazor.

Step 1: Add Bootstrap to Your Blazor Application

Before using Bootstrap Icons, ensure your Blazor app has Bootstrap included.

👉 If you haven’t already set it up, check out our tutorial on how to add Bootstrap to a Blazor Web Application.

Step 2: Choose an Icon

1. Visit Bootstrap Icons
2. Choose the icon you want (e.g., airplane-fill)
3. Copy the SVG code snippet provided on the page

Understanding SVG as CSS Background

SVGs converted to CSS background images offer flexibility and performance benefits. Instead of embedding the full <svg> element into your HTML, encoding it as a data:image/svg+xml URL allows you to apply it like any other background image in your stylesheets. This method reduces HTML clutter and makes your components more reusable. Additionally, because SVGs are vector-based, they remain sharp and scalable at any resolution or zoom level, which is ideal for responsive Blazor applications.

Step 3: Convert SVG to CSS

To use the icon as a background image, convert the SVG to a data:image URL:

1. Visit SVG to CSS converter
2. Paste the copied SVG code
3. Generate the CSS snippet

Step 4: Add Icon Style to NavMenu

Edit NavMenu.razor.css and add the generated CSS:

Step 5: Use the Icon in Your Navigation Menu

.bi-airplane-fill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-airplane-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151...'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

Open NavMenu.razor and modify the NavLink to include the icon:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="weather">
        <span class="bi bi-airplane-fill" aria-hidden="true"></span> Weather
    </NavLink>
</div>

Final Result

You’ll now see the airplane icon next to your Weather menu item, styled using your CSS.

Summary

Using Bootstrap Icons in a Blazor .NET app is simple and flexible. With just a few steps, you can bring in scalable icons that improve usability and design consistency. Whether for navigation, buttons, or UI highlights, Bootstrap Icons are a powerful tool for any Blazor developer.