Icon

Icons are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content.

Parameters

Color

Set the color of icon. When an semantic color (neutral, primary, secondary, success, error) is applied color will change the size, the radius, the background and the text color of the icon.

TypeDefault Value
stringnull

semantic color

other color

<NVText MB="1">semantic color</NVText>
<NVStack Gutter="3" MB="4">
  <NVIcon Name="search" Medium Color="neutral" />
  <NVIcon Name="search" Medium Color="primary"/>
  <NVIcon Name="search" Medium Color="secondary"/>
  <NVIcon Name="search" Memium Color="success"/>
  <NVIcon Name="search" Memium Color="error"/>
</NVStack>
<NVText MB="1">other color</NVText>
<NVIcon Href="#" Color="orange-800" TextColor="white" Medium>orange 800</NVIcon>
<NVIcon Href="#" Color="secondary-800" TextColor="white" Medium>petrol 800</NVIcon>  
<NVIcon Href="#" Color="green-100"  TextColor="green-500" Medium>green 100</NVIcon>  
<NVIcon Href="#" TextColor="red-100"  TextColor="red-500" Medium>red 100</NVIcon>

Large

Large parameter, set the size of the icon to 28px. If a semantic color is set, the size will be 48px.

TypeDefault Value
stringnull
<NVStack Gutter="3">
  <NVIcon Name="search" Large Color="neutral" />
  <NVIcon Name="search" Large />
</NVStack>

Medium

Medium parameter, set the size of the icon to 24px. If a semantic color is set, the size will be 40px.

TypeDefault Value
stringnull
<NVStack Gutter="3">
  <NVIcon Name="search" Medium Color="neutral" />
  <NVIcon Name="search" Medium />
</NVStack>

Size

Set the size of the icon

TypeDefault Value
stringnull
<NVStack Gutter="3" MB="4">
  <NVIcon Name="search" XSmall Color="neutral" />
  <NVIcon Name="search" Small Color="neutral"/>
  <NVIcon Name="search" Medium Color="neutral"/>
  <NVIcon Name="search" Large Color="neutral"/>
  <NVIcon Name="search" XLarge Color="neutral"/>
</NVStack>
<NVStack Gutter="3">
  <NVIcon Name="search" XSmall />
  <NVIcon Name="search" Small />
  <NVIcon Name="search" Medium />
  <NVIcon Name="search" Large />
  <NVIcon Name="search" XLarge />
</NVStack>

Small

Small parameter, set the size of the icon to 24px. If a semantic color is set, the size will be 40px.

TypeDefault Value
stringnull
<NVStack Gutter="3">
  <NVIcon Name="search" Small Color="neutral" />
  <NVIcon Name="search" Small />
</NVStack>

XLarge

XLarge parameter, set the size of the icon to 32px. If a semantic color is set, the size will be 56px.

TypeDefault Value
stringnull
<NVStack Gutter="3">
  <NVIcon Name="search" XLarge Color="neutral" />
  <NVIcon Name="search" XLarge />
</NVStack>

XSmall

XSmall parameter, set the size of the icon to 16px. If a semantic color is set, the size will be 24px.

TypeDefault Value
stringnull
<NVStack Gutter="3">
  <NVIcon Name="search" XSmall Color="neutral" />
  <NVIcon Name="search" XSmall />
</NVStack>

Customization

FontSize

Because the icon set come from a font, you can use FontSize to custom the size of an icon.
TypeDefault Value
stringnull
<NVStack Gutter="3">
  <NVIcon FontSize="100px" Height="auto" Name="search" />
</NVStack>

TextColor

Because the icon set come from a font, you can use TextColor to custom the color of an icon.
TypeDefault Value
stringnull
<NVStack Gutter="3">
  <NVIcon TextColor="orange-500" Name="search" Medium />
  <NVIcon TextColor="petrol-500" Name="search" Medium />
</NVStack>

Icon Set

If you want to another icon set, the easiest way is to create your own Component based on NVBaseComponent.

Code

// in your html head load the icon set
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css" />

Code

// BIcon.razor

@inherits Nova.Components.NVBaseComponent;

<NVBlock Tag="i" @attributes=@Attributes(ComponentClass, new string[] {"Color"}) aria-label="@Name" role="img"></NVBlock>

@code {

  [Parameter]
  public string Name { get; set; }

  [Parameter]
  public string Size { get; set; } = "base";

  public string ComponentClass
  {
    get { return $"bi bi-{Name}"; }
  }

  public override async Task SetParametersAsync(ParameterView parameters)
  {
    await base.SetParametersAsync(parameters);

    string[] colorTint = ColorUtils.GetColorTint(Color?.ToLower() ?? "");

    string color = colorTint[0];
    string tint = colorTint[1];

    if (!String.IsNullOrWhiteSpace(Size) && String.IsNullOrWhiteSpace(TextSize) && String.IsNullOrWhiteSpace(FontSize))
    {
      AddClass(DomClass.TextSize(Size));
    }

    if (!String.IsNullOrEmpty(color) && !String.IsNullOrEmpty(tint))
    {
      AddClass(DomClass.TextColor(color, tint));
    }
  }
}
On this page