Different style of icons

Radzen.Blazor Components
1

I've been using a lot of Material Icons on my buttons and it's really useful, but does it only use the "Filled" style of the icons?

I just made a button to copy text to a clipboard and I'd like to use the "Outlined" version of "file_copy", is that possible using Radzen or can the Icon only be the default style you have?

2

Hi @Grappig13,

Radzen includes only the default Material Icons font.

3

Is there still no way to change the icons type to Material "Outline"?

The examples (Blazor Icon component) includes:
--rz-icon-font-family: 'Material Symbols Outlined';

But it doesn't work. Instead of icons, I see only inscriptions.

4

The Outlined icons font file is not part of the Radzen.Blazor package and you need to add it manually:

  1. You can download the file from Material Icons GitHub repo -> https://github.com/google/material-design-icons/tree/master/variablefont

  2. Define the font-face before you set the --rz-icon-font-family. Change PATH-TO-FONT below with the actual path to the font in your app. You can use as a reference the example you mentioned.

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

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

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

    /* END Material Symbols font CSS */
</style>
  1. Make sure to add the CSS class in which you defined --rz-icon-font-family to the element in which you use the icons. In this example it is class="material-symbols and you could add it directly to the body:

<body class="material-symbols">

1 Like