Icons extension

Overview

Icons extension is used to have a strongly typed list of icons.

Installation

NuGet

Install sidebar extension from NuGet.

Install-Package Blazorise.Icons.FontAwesome

CSS

Include CSS link into your index.html or _Host.cshtml file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

Note: If instead of FontAwesome icons you want to use Material icons you will need to define static blazorise.icons.material.css in your index.html or _Host.cshtml file. This file is required for some custom icon styles to work.

<link href="_content/Blazorise.Icons.Material/blazorise.icons.material.css" rel="stylesheet" />

Registrations

builder.Services
  .AddBlazorise()
  .AddBootstrapProviders()
+  .AddFontAwesomeIcons();

Usage

Basic

To define an icon it’s simple as this.

<Icon Name="IconName.Mail" />

Custom

You can also use a real icon name instead of predefined enum.

<Icon Name="@("fa-phone")" />

Icon Names

Preferred way to define icon is to use an enum IconName. That way every icon will be applied automatically based on the icon package that you’re using.

In case you cannot find an icon in the provided enum, you can also use prebuilt list of icon names that comes with every icon package. For example for font-awesome you would use FontAwesomeIcons, while for material that would be MaterialIcons.

<Icon Name="FontAwesomeIcons.Announcement" />

Style

By default all icons will have Solid style. To change it you can use one of the supported styles:

• Solid
• Regular
• Light
• DuoTone

<Icon Name="IconName.Mail" IconStyle="IconStyle.Light" />

Attributes

Name	Type	Default	Description
Name	object	null	Icon name.
IconStyle	IconStyle	Solid	Suggested icon style.
IconSize	IconSize	None	Defines the icon size.