Blazor Bootstrap: Icon Component Examples

Icons:

<p>
    <Icon Name="IconName.Alarm"></Icon>
    <Icon Name="IconName.AlarmFill"></Icon>
</p>

Icons with different Sizes:

<p>
    <Icon Name="IconName.Alarm" Size="IconSize.x2"></Icon>
    <Icon Name="IconName.Alarm" Size="IconSize.x3"></Icon>
    <Icon Name="IconName.Alarm" Size="IconSize.x4"></Icon>
    <Icon Name="IconName.Alarm" Size="IconSize.x5"></Icon>
</p>

Inline text with icon:

<p>
    Inline text <Icon Name="IconName.Alarm" />
</p>

Link with icon:

<p>
    <a href="#" class="text-decoration-none">
        Example link text <Icon Name="IconName.Alarm" />
    </a>
</p>

Link with custom icon

<p>
    <a href="#" class="text-decoration-none">
        Example link text <Icon CustomIconName="bi bi-bootstrap" />
    </a>
</p>

Button with icon and text:

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

Button with icon only:

<p>
    <Button Color="ButtonColor.Secondary"><Icon Name="IconName.Alarm" /></Button>
</p>

Blazor Bootstrap Links:

  1. Blazor Bootstrap: Quick Start
  2. Blazor Bootstrap: Alert Component Examples
  3. Blazor Bootstrap: Buttons Examples
  4. Blazor Bootstrap: Icons Component Examples
  5. Blazor Bootstrap: Modal Component Examples
  6. Blazor Bootstrap: Offcanvas Component Example
  7. Blazor Bootstrap: Toasts Component Examples
  8. Blazor Bootstrap: Tooltip Component Examples