HxIcon #

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

(Internally used by HxButton and other components.)

Icon #

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

Currently, the library brings just one implementation - BootstrapIcon.

Bootstrap icon #

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 that accepts the 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 that 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 below),
    • add any properties that 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 that renders your icon

    <span class="@CssClassHelper.Combine("my-custom-icon", CssClass)"
          @attributes="this.AdditionalAttributes">
    	@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 now use your new icons with HxIcon (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 The CSS class to combine with the basic icon CSS class.
Icon IconBase The icon to display.
An unhandled error has occurred. Reload 🗙