Filled icons instead of outlined

Radzen.Blazor Components
1

I'm wondering how I can set some of my icons to be filled instead of outline.
When we upgraded to Radzen 5.0 all our icons switched to outlined style.
Which is fine by we somehow need to set some of our icons to be filled for our users.

2

Hi @RagnarSmari,

The new Material Symbols font allows you to use the following style:

<RadzenIcon Icon="info" Style="font-variation-settings: 'FILL' 1;" />

You can also apply it via css class:

<RadzenIcon Icon="info" class="filled-icon" />

<style>
.filled-icon {
    font-variation-settings: 'FILL' 1;
}
</style>
1 Like
3

@yordanov do we have option to apply this style to Icon used in RadzenButton?

4

For RadzenButton it should be:

<RadzenButton class="my-button"  ... />

<style>
.my-button .rzi {
    font-variation-settings: 'FILL' 1;
}
</style>
5

Thank you !!! @yordanov

6

FWIW you can do this globally in app.css:

:root {
    --rz-icon-fill: 1;
    --rz-icon-grade: 0;
    --rz-icon-optical-size: 48;
}
3 Likes