How to Use Custom SVG Icons with RadzenButton in a Blazor WebAssembly App?

Radzen.Blazor Components
1

Hello,

I'm currently experiencing an issue with the RadzenButton component while trying to use my own SVG icons in a Blazor WebAssembly hosted application.

I have placed a number of SVG files that I want to use as button icons in an "Icons" folder. However, it seems that the Icon property of RadzenButton only accepts icon names from the Google Material Icons library, not direct paths to SVG files.

Here are a couple of examples of what I've tried:


<RadzenButton Variant="Variant.Outlined" ButtonStyle="ButtonStyle.Danger" Icon="/Icons/excel.svg" />

And also:


<link href="Icons/" rel="stylesheet"> //index.html

<RadzenButton Variant="Variant.Outlined" ButtonStyle="ButtonStyle.Danger" Icon="excel.svg" />

Neither of these attempts seem to work. Is there a specific way to do this with RadzenButton, or is there a workaround I could use to achieve the same effect?

Any help would be greatly appreciated. Thank you in advance for your time and effort.

Best regards,

Daniel

2

Hi @Molesox,

Have a look at the Content in Buttons example in this demo page https://blazor.radzen.com/buttons. You can use Image="" instead of Icon="" or add <RadzenImage> inside the button and style it as you see fit.

2 Likes