HxIcon

Displays an icon. Currently supports Bootstrap icons through BootstrapIcon class.
Full documentation and demos: https://havit.blazor.eu/components/HxIcon You can add your own icon-set easily.

(Internally used by HxButton and other components.)

Icon #

Icon is a class derived from IconBase as we want to allow use of icons from different icon sets.

Currently, the library brings just one implementation - BootstrapIcon.

BootstrapIcon #

For available icons see Bootstrap Icons or BootstrapIcon members.

Basic Usage #

<HxIcon Icon="@BootstrapIcon.Bootstrap" />
<HxIcon Icon="@BootstrapIcon.HandThumbsUp" />

Custom Icons #

HxIcon is a host component which accepts Icon parameter (type of IconBase) and passes the rendering to a specific icon-component retrieved from the settings.

You can add your own icons by following these steps:

  1. Create a new class derived from IconBase which represents settings for your new type of icon

    public class MyCustomIcon : IconBase
    {
    	public override Type RendererComponentType => typeof(MyCustomIconRenderer);
    
    	public string IconCharacter { get; set; }
    
    	public static MyCustomIcon Poo => new MyCustomIcon { IconCharacter = "💩" };
    	public static MyCustomIcon ThumbUp => new MyCustomIcon { IconCharacter = "👍" };
    }
    • RenderComponentType property returns the rendering component for your icon (see bellow),
    • add any properties which you need to parametrize your render-component to render the specific icon from the set (IconCharacter in our sample),
    • add static properties returning instances with the settings of each icon.
  2. Create a new component which renders your icon

    <span class="@CssClassHelper.Combine("my-custom-icon", this.CssClass)"
          @attributes="this.AdditionalAttributes">@this.Icon.IconCharacter</span>
    
    @code {
        /// <summary>
        /// Icon to render.
        /// </summary>
        [Parameter] public MyCustomIcon Icon { get; set; }
    
        /// <summary>
        /// CSS Class to combine with basic icon CSS class.
        /// </summary>
        [Parameter] public string CssClass { get; set; }
    
        /// <summary>
        /// Additional attributes to be splatted onto an underlying HTML element.
        /// </summary>
        [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object> AdditionalAttributes { get; set; }
    }

    It can be more or less any component that receives the following parameters from HxIcon:

    • Icon which allows you to distinguish between icons (it can include the name of CSS class used for the icon, the URL of an image, unicode character, or anything else),
    • CssClass which allows you to apply any additional CSS classes from the HxIcon.CssClass (usually used for positioning, sizing, margins, etc.),
    • additional parameters for attribute splatting ([Parameter(CaptureUnmatchedValues = true)])
  3. You can use your new icons with HxIcon now (and everywhere else where the Icon parameter(s) can be set):

    💩 👍
    <HxIcon Icon="MyCustomIcon.Poo" />
    <HxIcon Icon="MyCustomIcon.ThumbUp" />
    <HxButton Icon="MyCustomIcon.ThumbUp" Text="Button with icon" Color="ThemeColor.Secondary" Outline="true" />

API

Parameters

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying HTML element.
CssClass string CSS Class to combine with basic icon CSS class.
Icon IconBase Icon to display.
An unhandled error has occurred. Reload 🗙