👁 Image
Blazicons 3.0.12

Blazicons

Provides support for displaying SVG based icons in Blazor projects.

Check out the Demo Site.

👁 Nuget

👁 Build Status

Overview

Blazicons is a simple library consisting of one Blazor component, the Blazicon. A Blazicon component displays an SVG icon similar to how a font icon would be displayed.

Why Blazicons?

Why not just use font libraries to display icons? Blazicons provides a couple of benefits over using font icon libraries.

The first benefit is resource size. Blazicons is designed to leverage the SVG versions of the icons from popular icon libraries. Given Blazor's assembly trimming, only the icons used, rather than the entire library of icons are delivered to the client.

With Blazicons, an additional benefit is the ability to leverage intellisense. The various icons available in a given icon library are displayed with Visual Studio's intellisense options.

Getting Started

Select a Library

To get started using Blazicons, just install the Blazicons NuGet package of the desired icon library. The following options are currently among those available.

• Blazicons.Bootstrap
• Blazicons.Devicon
• Blazicons.FlagIcons
• Blazicons.FluentUI
• Blazicons.FontAwesome
• Blazicons.GoogleMaterialDesign
• Blazicons.Ionicons
• Blazicons.Lucide
• Blazicons.MaterialDesignIcons

Add Import

Next add the Blazicons reference to the _Imports.razor file in the Blazor project.

@using Blazicons

Add Styles

There are two options for ensuring the Blazicons styles are available to the Blazor project. Most Blazor applications support scoped CSS. In these instances it is recommended to just ensure that the project styles.css file is referenced in the head tag section of the index.html/_Host.cshtml file.

<link href="My.App.styles.css" rel="stylesheet" />

As an alternative, the Blazicons CSS styles can be directly referenced in the index.html/_Host.cshtml file.

<link href="_content/Blazicons/css/blazicons.min.css" rel="stylesheet" />

Add a Blazicon

Finally, add the Blazicon component to your Blazor pages/components.

<Blazicon Svg="MdiIcon.Information"></Blazicon>

Parameters

Each parameter in a Blazor component has a rendering cost. Since it might be desirable to have many Blazicons on a page, maybe even in some sort of repeater control, one of the core principal when creating Blazicons was to limit the number of parameters.

As a result, a Blazicon only has one parameter, Svg. The Svg parameter is a special type of SvgIcon. These SvgIcon types are defined in the specific icon library Blazicon files.

Styling

A Blazicon is designed to be displayed with the size and color determined by current font size and color settings. Therefore, the size and color can easily be changed by adjusting the CSS font-size and color style attributes of the containing element.

<div style="font-size 200%; color: #f00;">
 <Blazicon Svg="Ionicon.ShapesSharp"></Blazicon>
</div>

Styling helper methods also are available on the SvgIcon object.

<Blazicon Svg='Ionicon.ShapesSharp.WithColor("#f00").WithSize("200%")'></Blazicon>