Icons

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

Installation

NuGet

Install extension from NuGet.
Install-Package Blazorise.Icons.FontAwesome

Font Awesome Icons 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.15.4/css/all.css" />

Material Icons 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();

Basic Example

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="Blazorise.Icons.FontAwesome.FontAwesomeIcons.Voicemail" />

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

Size

You can set the size to one of the supported below.
ExtraSmall
Small
Large
x2
x3
x4
x5
x6
x7
x8
x9
x10
<Div Flex="Flex.Row.Wrap.JustifyContent.Start.AlignItems.Start">
    @foreach ( var iconSize in Enum.GetValues<IconSize>() )
    {
        @if ( iconSize == IconSize.None )
            continue;

        <Div Flex="Flex.Column.JustifyContent.Center">
            <Span Flex="Flex.JustifyContent.Center.AlignItems.Center" Padding="Padding.Is5">
                <Icon Name="IconName.Camera" IconSize="@iconSize" />
            </Span>
            <Text TextAlignment="TextAlignment.Center">
                @iconSize
            </Text>
        </Div>
    }
</Div>

Attributes

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