Using image sprites with Radzen components

Radzen.Blazor Components
1

I have a question about using custom images from something like a sprite – a single file with multiple images. I have a bunch of custom images that I am going to put in a sprite, so I want to reference the images in this sprite from references in my .css file, and I am kind of struggling with getting it to work with your components. I have tried to use the class attribute, and it really messes things up, so I found a work around that kind of works, but it is not ideal because I would have to request and load all of my custom images, and I don't want to do that. Is there a better way of referencing an image from a .css file where it displays correctly? If I use the image or path property pointing to the image file, that seems to work fine, so I am probably doing something wrong when trying to use the image from the .css file.

<RadzenButton Variant="Variant.Outlined" ButtonType="ButtonType.Submit">
                        <span class="bg-Execute"></span>
                        Execute
                    </RadzenButton>
 
 
.bg-Execute {
    width: 16px;
    height: 16px;
    background: url('images/css_sprites.png') -2598px -2538px;
}

I am also having issues with RadzenProfileMenuItem, where I can’t get it to work with Icon, Image, or Class, so I thought you might know what would work. I even tried to use the span tag, and that made the image not displayed right. Do you have any recommendations when dealing with many custom images.

2

Hi @kentroylance,

The only issue I see here is that setting width and height of a <span> won't work by default as it is an inline element. Try setting its display as well e.g. display: inline-block;.

The RadzenProfileMenu demo shows how to use the Icon property:

        <ChildContent>
            <RadzenProfileMenuItem Text="Buttons" Path="buttons" Icon="account_circle"></RadzenProfileMenuItem>
            <RadzenProfileMenuItem Text="Menu" Path="menu" Icon="line_weight"></RadzenProfileMenuItem>
            <RadzenProfileMenuItem Text="FileInput" Path="fileinput" Icon="attach_file"></RadzenProfileMenuItem>
            <RadzenProfileMenuItem Text="Dialog" Path="dialog" Icon="perm_media"></RadzenProfileMenuItem>
            <RadzenProfileMenuItem Text="Notification" Path="notification" Icon="announcement"></RadzenProfileMenuItem>
        </ChildContent>

We prefer using an icon font (Material Icons) instead of a sprite.