Icons extension


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



Install sidebar extension from NuGet.

Install-Package Blazorise.Icons.FontAwesome


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" />


+  .AddFontAwesomeIcons();



To define an icon it’s simple as this.

<Icon Name="IconName.Mail" />


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" />


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" />


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