SfDropDownButton Icon not visibile when URL

[justus hinken]

Hey guys,

I use your DropDownButton. Is it possibile to use URL and display the Icon? Or is URL only without a icon possible?

<SfDropDownButton CssClass="e-caret-hide e-flat">

    <img class="h-6 w-6" src="/img/phosphor/dots-three-vertical.svg" />

    <DropDownButtonEvents ItemSelected="ItemSelectedAsync" />

    <DropDownMenuItems>

        <DropDownMenuItem Text="@DateTime.Now.ToString()" IconCss="f-clock f-mask-svg" Disabled="true" />

        <DropDownMenuItem Separator="true" />

        <DropDownMenuItem Text="Details" ID="details" IconCss="f-eye f-mask-svg" Url="@($"/notices/2222}")"/>

        <DropDownMenuItem Text="Archivieren" ID="archive" IconCss="f-archive f-mask-svg" />

        <DropDownMenuItem Text="Person zuweisen" ID="assign" IconCss="f-user-plus f-mask-svg" />

        <DropDownMenuItem Text="Löschen" ID="delete" IconCss="f-trash f-mask-svg" />

        <DropDownMenuItem Separator="true" />

        <DropDownMenuItem Text="Warnungseinstellungen" ID="noticeSettings" IconCss="f-sliders-horizontal f-mask-svg" />

    </DropDownMenuItems>

</SfDropDownButton>

As you see in the screenshot somehow the Icon is not visible? Do you have any tips for me?

Kind

[YuvanShankar Arunagiri]

Hi Justus,

We have validated your reported query and prepared the sample based on your shared code snippet. But on our end, the icon and URL support for dropdown items render properly. Refer to the below code snippet and attached sample.

Syncfusion icons: https://blazor.syncfusion.com/documentation/appearance/icons

<SfDropDownButton CssClass="e-caret-hide e-flat" IconCss="e-icons e-more-vertical-1">

    <DropDownButtonEvents ItemSelected="ItemSelectedAsync" />

    <DropDownMenuItems>

        <DropDownMenuItem Text="@DateTime.Now.ToString()" IconCss="e-icons e-clock" Disabled="true" />

        <DropDownMenuItem Separator="true" />

        <DropDownMenuItem Text="Details" ID="details" IconCss="e-icons e-eye" Url="/counter" />

        <DropDownMenuItem Text="Archivieren" ID="archive" IconCss="e-icons e-link-remove" />

        <DropDownMenuItem Text="Person zuweisen" ID="assign" IconCss="e-icons e-plus-small" />

        <DropDownMenuItem Text="Löschen" ID="delete" IconCss="e-icons e-trash" />

        <DropDownMenuItem Separator="true" />

        <DropDownMenuItem Text="Warnungseinstellungen" ID="noticeSettings" IconCss="e-icons e-length" />

    </DropDownMenuItems>

</SfDropDownButton>

Output screenshot:

Kindly ensure the icon class is properly loaded on your end and refer to the attached sample, and if you are still facing the issue, kindly share the full code snippet with icon style codes on your side with the dropdown button component. Based on that, we will check and provide the better solution.

Regards,

YuvanShankar A

Attachment: BlazorAppnugetpackage_37bb5f1a.zip

[justus hinken]

Thank you for your reply!

When changing

 <DropDownMenuItem Text="Details" ID="details" IconCss="f-eye f-mask-svg" Url="/"/>

to

<DropDownMenuItem Text="Details" ID="details" IconCss="e-icons e-eye" Url="/" />

it works. But I am than displays the syncfusion icon. And before my own icon.

I implemented f-eye f-mask-svg  to display my own icons as your lib has not all my wanted ones.

Any clue?

f-mask-svg {

    background-color: currentColor;

    mask-image: var(--svg);

    mask-repeat: no-repeat;

    mask-size: 100% 100%;

  }

  .f-eye {

    --svg: url("/img/phosphor/eye.svg");

  }

[YuvanShankar Arunagiri]

Hi Justus

We have reviewed your query, and based on the architecture of the Dropdown Menu, enabling the Url property in a menu item renders an anchor (<a>) tag within the list (<li>) element. Due to this HTML structure, custom icon styles may not apply as expected to URL-enabled dropdown menu items.

To resolve this issue, you can set the height for the icon of the dropdown menu items that have the Url property enabled. Refer to the below code snippet.

<style>

    .f-mask-svg {

        height: 16px;

        margin: 10px 0;

        background-color: currentColor;

        mask-image: var(--svg);

        mask-repeat: no-repeat;

        mask-size: 100% 100%;

    }

</style>

Please get back to us if you need any further assistance with this.

Regards,

YuvanShankar A