Material Icons not centered

Radzen.Blazor Components
1

Some of the Material Icons do not display center justified, for example: inbox_customize and wifi_calling_1. My current version of the Radzen Blazor components is 4.10.3.

MaterialIcons
MaterialIcons1034×318 22 KB

I have tried adding a style to the icon component and a class to the span, but they just do not seem to justify correctly. Are there any suggestions on how to display the icons center justified?

<div><RadzenIcon Icon="inbox_customize" /><span class="rz-justify-content-center">inbox_customize</span></div>
<div><RadzenIcon Icon="wifi_calling_1"  style="display: -webkit-flex;display: -webkit-flex;display: -webkit-flex;justify-content: center"/><span>wifi_calling_1</span></div>
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>
3

@yordanov Thank you, that was it! I was looking in Material Symbols instead of Material Icons. :melting_face:

I will try changing the font and see what happens.

Thank you for the quick response!