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):

   💩 👍 👍Button with icon

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

API #

Parameters #