Different style of icons

Radzen.Blazor Components
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