Adding icons to a title attribute of Ant Designs Blazor (DescriptionsItem)

Question

Ant Design Blazor has a descriptions component for generating key/value pair elements. I'd like to add an icon and tooltip as the key/title. The problem is, that the title is set as an attribute like this:

<DescriptionsItem Title="Billing Mode">Prepaid</DescriptionsItem>

I have tried to set Title as child element, cause this would allow me to add any other components inside it:

<DescriptionsItem>
    <Title>My title</Title>
    My Text
</DescriptionsItem>

But this doesn't work, <Title> is a standalone component for html titles like h1, h2, ... which means both got rendered in the value section without any title:

I couldn't find a way to render other components in the title attribute, it just works in the body/value like this:

<DescriptionsItem Title="Created">
    <Tooltip Placement="@PlacementType.Bottom" Title="creationIconTitle">
        <Icon Type="plus-circle" Theme="outline" />
    </Tooltip>
    @Community.Created.ToLocalTime().ToString("G")
</DescriptionsItem>

But I'd like to have the icon in the title. Is there a way to realize this?

Answer 1

You are in luck! The source says the developers thought of this and added a TitleTemplate RenderFragment. Thus you can do something like:

<Descriptions Title="Descriptions">
    <DescriptionsItem>
        <TitleTemplate>
            <AntDesign.Tooltip Placement="@PlacementType.Bottom">
                <AntDesign.Icon Type="plus-circle" Theme="outline" />
            </AntDesign.Tooltip>
            31.10.2008 17:04:32
        </TitleTemplate>
    </DescriptionsItem>
</Descriptions>

This TitleTemplate is used over the Title, if defined source