Icon not showing up in RadzenButton when in custom component

Radzen.Blazor Components
1

I have a custom component that has a RadzenButton in it, I use it for a Delete Button in a RadzenGrid.

Below is to code

The component code "AmzRadActionDialog" is as follows

@using System.Text.Json
@using Oqtane

@namespace Amazing.Module.Membership.Controls

@inherits LocalizableComponent

@inject IStringLocalizer<SharedResources> SharedLocalizer

@if (_visible)
{
    <div class="app-actiondialog">
        <div class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">@Header</h5>
                        <button type="button" class="btn-close" aria-label="Close" @onclick="DisplayModal"></button>
                    </div>
                    <div class="modal-body">
                        <p>@Message</p>
                    </div>
                    <div class="modal-footer">
                        @if (!string.IsNullOrEmpty(Action))
                        {
                            <RadzenButton ButtonType="@ButtonType" Icon="@IconName" ButtonStyle="@ButtonStyle" Click="Confirm">@Text</RadzenButton>
                        }
                        <RadzenButton ButtonType="ButtonType.Button" Icon="@IconName" ButtonStyle="ButtonStyle.Secondary" Click="DisplayModal">@SharedLocalizer["Cancel"]</RadzenButton>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
@if (_authorized)
{
    if (Disabled)
    {
        <button type="button" class="@Class" disabled>@((MarkupString)_iconSpan) @Text</button>
    }
    else
    {
        <RadzenButton ButtonType="ButtonType.Button" style="margin-top: -4px" Icon="@IconName" Text="test" ButtonStyle="@ButtonStyle" Click="DisplayModal"></RadzenButton>
    }
}

The razor page which contains this child component is as follows

@using Amazing.Module.Membership.Controls
@using Amazing.Module.Membership.Services
@using Amazing.Module.Membership.Models
@using Microsoft.AspNetCore.Components.Forms

@namespace Amazing.Module.Membership.Courses

@inherits ModuleBase

@inject ICourseService CourseService
@inject NavigationManager NavigationManager
@inject IStringLocalizer<Index> Localizer
@inject DialogService DialogService

<RadzenDataGrid @ref="gridCourses" AllowFiltering="true" AllowSorting="true" AllowColumnResize="true"
                Data="@colParentCourses" TItem="Models.Course" RowRender="@RowRender" LoadChildData="LoadChildData" 
                RowCollapse="@(args => gridCourses.ColumnsCollection.ToList().ForEach(c => c.ClearFilters()))">
    <HeaderTemplate>
        <AmzRadActionLink Action="Add" ButtonStyle="ButtonStyle.Primary" Security="SecurityAccessLevel.Edit" Text="Add Course" ResourceKey="Add" />
    </HeaderTemplate>
    <Columns>
        <RadzenDataGridColumn TItem="Models.Course" Property="CourseId" Filterable="false" Title="ID" Frozen="true" Width="160px" TextAlign="TextAlign.Center" />
        <RadzenDataGridColumn TItem="Models.Course" Property="Title" Title="Title" />
        <RadzenDataGridColumn TItem="Models.Course" Property="Name" Title="Name" />
        <RadzenDataGridColumn TItem="Models.Course" Property="Path" Title="Path" />
        <RadzenDataGridColumn TItem="Models.Course" Property="Type" Title="Type"/>
        <RadzenDataGridColumn TItem="Models.Course" Property="Status" Title="Status" />
        <RadzenDataGridColumn TItem="Models.Course" Property="IsNavigation" Title="Navigation"  />
        <RadzenDataGridColumn TItem="Models.Course" Property="IsPreview" Title="Preview" />
        <RadzenDataGridColumn TItem="Models.Course" Context="course" Filterable="false" Sortable="false" TextAlign="TextAlign.Left" Width="90px">
            <Template Context="course">
                <AmzRadActionLink Action="Edit" Parameters="@("id=" + course.CourseId.ToString())" IconName="edit" IconOnly="true" Security="SecurityAccessLevel.Edit" ResourceKey="Edit" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Models.Course" Context="course" Filterable="false" Sortable="false" TextAlign="TextAlign.Left" Width="90px">
            <Template Context="course"> 
                <RadzenButton Icon="edit"></RadzenButton>
                <AmzRadActionDialog Action="Delete" ButtonStyle="ButtonStyle.Danger" IconName="edit" IconOnly="true" Header="Delete Course" Message="@string.Format(Localizer["Confirm.Page.Delete"], course.Name)" Security="SecurityAccessLevel.Admin" OnClick="@(async () => await DeleteCourse(course))" ResourceKey="DeleteCourse" />
            </Template>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

The result is as follows

image
image1092×326 16 KB

as you can see there are two button if i reference the button itself the icon shows up, but when I use the child component the icon doesn't show up.

2

As I already suggested you in your other thread you can examine what's rendered as HTML to check what is assigned as icon. You can also debug to check what's the value of IconName. Again, posting code that only you can run will prevent anyone in this community to help you.

3

The code of this component is incomplete. Where is IconName defined? Also please avoid posting duplicate threads in the future. This is against our community guidelines.

4

My original topic was closed and I couldn’t reopen it

The IconName is specified in my Child Component

<AmzRadActionDialog Action="Delete" ButtonStyle="ButtonStyle.Danger" IconName="edit" IconOnly="true" Header="Delete Course" Message="@string.Format(Localizer["Confirm.Page.Delete"], course.Name)" Security="SecurityAccessLevel.Admin" OnClick="@(async () => await DeleteCourse(course))" ResourceKey="DeleteCourse" />

and within the child component IconName which is a parameter assigned to Icon property of the RadzenButton

<RadzenButton ButtonType="ButtonType.Button" style="margin-top: -4px" Icon="@IconName" Text="test" ButtonStyle="@ButtonStyle" Click="DisplayModal"></RadzenButton>
5

Where is the IconName property defined though? Did you debug your code to see if it correctly set at all?

6

Not sure what I did but it is working now. Maybe it was a caching issue

image
image1362×406 26.1 KB