How do we reference icon on RadzenButton?

francis-humarang · August 28, 2019, 9:09am

Hi,

On the sample,

<RadzenButton Click="@((args) => Click(args, "Button with icon"))" Icon="account_circle" Style="margin-bottom: 20px; width: 80px" />

Where do we reference "account_circle"? Is this embedded resource which is part of Radzen? Do you have a list of these icon resource? Can I use a custom font as well and how to reference it?

Best Regards,
Francis

enchev · August 28, 2019, 9:59am

Hi Francis,

Yes, it is part of Radzen theme:

github.com

akorchev/blazor.radzen.com/blob/master/Shared/MainLayout.razor#L8


@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Http
@using Radzen.Blazor
@inherits LayoutComponentBase
@inject ThemeState ThemeState
@inject IUriHelper UriHelper


<link href="_content/Radzen.Blazor/css/@(Theme)" rel="stylesheet" />
<RadzenDialog />
<RadzenNotification />


<RadzenHeader>
    <ChildContent>
        <div class="row justify-content-start align-items-center">
            <div class="col-md-6 d-flex align-items-center">
                <RadzenSidebarToggle Click="@(args => { sidebar0.Toggle(); body0.Toggle(); })">
                </RadzenSidebarToggle>
                <RadzenLabel Text="Radzen Blazor Components">

The font used in Radzen themes is MaterialIcons, with custom CSS you can add other fonts as well:
https://material.io/resources/icons/?style=baseline

francis-humarang · August 28, 2019, 10:00am

Got it, Thanks you!

--Francis