Blazor Icon Overview
The Blazor Icon component allows you to easily display font or choose from a large set of predefined SVG icons, but it also gives you the ability to create custom font icons for your project. Benefiting from a number of attributes, you can define or change the size of the icon in use or apply different styles to it.
Blazor Icon Example
Usage
Before using the IgbIcon
, you need to register it as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
You will also need to link an additional CSS file to apply the styling to the IgbIcon
component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
The IgbIcon
doesn't contain any icons on its own. It's a conduit for displaying any registered SVG images.
Adding Icons
To register an image as an icon, all you need to do is call one of the 2 "register" methods on a single IgbIcon
element that allow you to add icons to an icon collection on your page.
The RegisterIcon
method allows you to register an SVG image as an icon from an external file:
<IgbIcon @ref="@IconRef" />
@code {
private IgbIcon IconRef { get; set; }
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (this.IconRef != null && firstRender)
{
this.IconRef.RegisterIcon("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg", "material");
}
}
}
The method above will add an icon named search
to a cached collection named material
.
In order to use the newly registered icon, all you have to do is to pass the name and collection to the IgbIcon
element:
IgbIcon IconName="search" Collection="material" />
The second method for registering icons is by passing an SVG string to the RegisterIconFromText
method:
<IgbIcon @ref="@IconRef" />
@code {
private IgbIcon IconRef { get; set; }
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (this.IconRef != null && firstRender)
{
const string searchIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>";
this.IconRef.RegisterIconFromText("search", searchIcon, "material");
}
}
}
Then you'd use it in the same way as described in the component sample above.
Size
The icon component supports three icon sizes - small
, medium
(default), and large
. In order to change the size of the icon, you can utilize the --ig-size
CSS variable as follows:
igc-icon {
--ig-size: var(--ig-size-large);
}
<IgbIcon Size="@SizableComponentSize.Large">
Mirrored
Some icons need to look a little different when used in Right-to-Left(RTL) mode. For that reason we provide a mirrored
attribute that, when set, flips the icon horizontally.
IgbIcon IconName="search" Collection="material" Mirrored="true" />
Styling
The icon component can be styled by applying styles directly to the IgbIcon
element;
igc-icon {
--size: 28px;
color: var(--ig-primary-500);
}