Material Icons not centered

Radzen.Blazor Components
2

Hi @ggrewe,

Such misalignment happens when there are no icons with such names in the icon font file. "inbox_customize" and "wifi_calling_1" are not part of the official Material Icons font. Reference -> Material Symbols and Icons - Google Fonts. Instead you can use "indox" and "wifi_calling" respectively.

Where did you get these icon names from? Perhaps you need to reference another font file e.g. Material Symbols instead of Material Icons. To do so, you need to load the font file using the CSS @font-face at-rule and set the corresponding font-family name to the --rz-icon-font-family CSS variable. See how in the example at the bottom of the Icons demo:

<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>