HxIcon overwrites class instead of combining it.

[osre77]

I'm using Havit.Blazor V4.6.5

I have a custom icon and it works as expected when I don't add a css class to the <HxIcon> element. But when I do, the css class of my renderer root element is replaced instead of merged.

This works: <HxIcon Icon="JhIcon.AlignLeft"></HxIcon> and results in <span class="jh_icon" b-yapvemezsy=""> ... This doesn't: <HxIcon Class="red_text" Icon="JhIcon.AlignLeft"></HxIcon> and results in: <span class="red_text" b-yapvemezsy=""> ... But I would expect: <span class="jh_icon red_text" b-yapvemezsy=""> ...

Here is my renderer component:

@using Icons

<span class="@CssClassHelper.Combine("jh_icon", CssClass)"
      @attributes="AdditionalAttributes">
    @ChildContent
</span>

@code {
    /// <summary>
    /// Icon to render.
    /// </summary>
    [Parameter]
    public SvgIcon? 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; } = new();

    private RenderFragment ChildContent => (builder) =>
    {
        builder.AddMarkupContent(0, Icon?.GetSvgData() ?? "<span>?</span>");
    };
}

When I use a BootstrapIcon the same thing happens. class is replaced instead of merged and the icon disappears.

Thank you in advance, Reinhard.

[hakenr]

You have to use CssClass parameter, when using the HxIcon, instead of Class (which gets part of AdditionalAttributes and overrides the class attribute when rendered).

-<HxIcon Class="red_text" Icon="JhIcon.AlignLeft"></HxIcon>
+<HxIcon CssClass="red_text" Icon="JhIcon.AlignLeft" />