Skip to main content

Blazor Icons

Blazor Bootstrap icon component will display an icon from any icon font.

Prerequisites​

  • Install Bootstrap Icons or other.

  • Include the icon fonts stylesheet in your website <head> or @import in CSS from CDN.

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet" />

Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ColorIconColorGets or sets the icon color.IconColor.None1.9.0
CustomIconNamestringSpecify custom icons of your own, like fontawesome. Example: fas fa-alarm-clock✔️1.0.0
NameIconNameGets or sets the icon name.✔️1.0.0
SizeIconSizeGets or sets the icon size.IconSize.None1.0.0
NOTE

Either Name or CustomIconName parameter is mandatory. For Font Awesome setup, please follow the Font Awesome website.

Examples​

Icons​

Blazor Bootstrap: Icon Component
<Icon Name="IconName.Alarm" />
<Icon Name="IconName.AlarmFill" />
<Icon Name="IconName.Window" />
<Icon Name="IconName.Apple" />

See icons demo here.

Sizes​

Blazor Bootstrap: Icon Component - Sizes
<Icon Name="IconName.Alarm" Size="IconSize.x2" />
<Icon Name="IconName.Alarm" Size="IconSize.x3" />
<Icon Name="IconName.Alarm" Size="IconSize.x4" />
<Icon Name="IconName.Alarm" Size="IconSize.x5" />

See icons with different size demo here.

Font awesome icons​

In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website.

Blazor Bootstrap: Icon Component - Font awesome icons
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x1" />
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x2" />
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x3" />
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x4" />
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x5" />
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x6" />

Colors​

Blazor Bootstrap: Icon Component - Colors
<Icon Name="IconName.Facebook" Size="IconSize.x2" Color="IconColor.Primary" />
<Icon Name="IconName.CloudLightningRainFill" Size="IconSize.x2" Color="IconColor.Secondary" />
<Icon Name="IconName.CheckAll" Size="IconSize.x2" Color="IconColor.Success" />
<Icon Name="IconName.Bug" Size="IconSize.x2" Color="IconColor.Danger" />
<Icon Name="IconName.ExclamationDiamondFill" Size="IconSize.x2" Color="IconColor.Warning" />
<Icon Name="IconName.InfoCircleFill" Size="IconSize.x2" Color="IconColor.Info" />
<Icon Name="IconName.CreditCard2FrontFill" Size="IconSize.x2" Color="IconColor.Light" />
<Icon Name="IconName.Apple" Size="IconSize.x2" Color="IconColor.Dark" />
<Icon Name="IconName.Asterisk" Size="IconSize.x2" Color="IconColor.Body" />
<Icon Name="IconName.VolumeMuteFill" Size="IconSize.x2" Color="IconColor.Muted" />
<Icon Name="IconName.BrowserSafari" Size="IconSize.x2" Color="IconColor.White" />

See icons with different size demo here.

Inline text with icon​

Blazor Bootstrap: Icon Component - Inline text with icon
Inline text <Icon Name="IconName.Alarm" />

See inline text with icon demo here.

Blazor Bootstrap: Icon Component - Link with icon
<a href="#" class="text-decoration-none">
    Example link text <Icon Name="IconName.Alarm" />
</a>

See link with icon demo here.

Blazor Bootstrap: Icon Component - Link with custom icon
<a href="#" class="text-decoration-none">
    Example link text <Icon CustomIconName="bi bi-bootstrap" />
</a>

See link with custom icon demo here.

Button with icon and text​

Blazor Bootstrap: Icon Component - Button with icon and text
<Button Color="ButtonColor.Primary"><Icon Name="IconName.Alarm" /> Button </Button>
<Button Color="ButtonColor.Success"><Icon Name="IconName.Alarm" /> Button </Button>
<Button Color="ButtonColor.Danger" Outline="true"><Icon Name="IconName.AlarmFill" /> Button </Button>

See button with icon and text demo here.

Button with icon only​

Blazor Bootstrap: Icon Component - Button with icon only
<Button Color="ButtonColor.Secondary"><Icon Name="IconName.Alarm" /></Button>

See button with icon only demo here.

Button with font awesome icon​

In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website.

Blazor Bootstrap: Icon Component - Button with font awesome icon
<Button Color="ButtonColor.Secondary" TooltipTitle="Compare code">
    <Icon CustomIconName="fa-solid fa-code-compare"/>
</Button>
<Button Color="ButtonColor.Secondary" TooltipTitle="Create pull request">
    <Icon CustomIconName="fa-solid fa-code-pull-request" />
</Button>

Icon with tooltip​

Blazor Bootstrap: Icon Component - Icon with tooltip
<Tooltip Title="Info Tooltip" role="button">
    <Icon Name="IconName.InfoCircleFill"></Icon>
</Tooltip>

Bootstrap Icons​

Blazor Bootstrap: Icon Component - Bootstrap Icons

See all bootstrap icons demo here.