I cannot change the weight of the my radzen icon component

Radzen Studio Blazor Server
1

Hello I am using the outlined material font icons of Radzen. I can change the font size , and the font familiy but not the font weight. I am have tried the setting under different css definitions like below but noone worked. But the other settings like font-family and font-size are working. What could be the problem?

.rzi-header {
font-size: 36px !important;
font-weight:100 !important;
}

.rzi.rzi-header {
font-family: "Material Icons Outlined" !important;
font-weight: 100 !important;
}

.rzi {
font-family: "Material Icons Outlined" !important;
font-weight:100!important;
}

2

Hi @mdarende,

The outlined icon font is not a variable font. Material Symbols is a variable font containing multiple stylistic variations. See this page for more information - Material Symbols and Icons - Google Fonts. You can see that changing the Style option from Material Symbols (new) to Material Icons hides all font settings related to Weight, Grade, Optical Size etc.

To use the symbols font you have to download it, and use it just like the outlined icon font:

<style>
    /* START Material Symbols font CSS */

    @@font-face {
        font-family: 'Material Symbols Outlined';
        font-style: normal;
        font-weight: 100 700;
        src: url('fonts/MaterialSymbols-Outlined.woff2') format('woff2');
    }

    .material-symbols {
        --rz-icon-font-family: 'Material Symbols Outlined';
    }

    /* END Material Symbols font CSS */
</style>
<div class="material-symbols">
    <RadzenIcon Icon="alarm" style="font-weight: 100;"/>
    <RadzenIcon Icon="alarm" style="font-weight: 200;"/>
    <RadzenIcon Icon="alarm" style="font-weight: 300;"/>
    <RadzenIcon Icon="alarm" style="font-weight: 400;"/>
    <RadzenIcon Icon="alarm" style="font-weight: 500;"/>
    <RadzenIcon Icon="alarm" style="font-weight: 600;"/>
    <RadzenIcon Icon="alarm" style="font-weight: 700;"/>
    <RadzenIcon Icon="alarm" style="font-weight: 800;"/>
</div>