RadzenPanelMenuItem's Image svg theme color

Radzen.Blazor Components
1

Hi,
I wonder if the color of a svg image on RadzenPanelMenuItem can be changed per theme as the icon is.

<RadzenPanelMenuItem Text="Samples" Path="/samples" Image="/images/blood-bag.svg" />
<RadzenPanelMenuItem Text="Analyses" Path="/analyses" Icon="insert_chart" />

image

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,7C20,7 20,6 20,6V5H18V7H16V6C16,4.27 14.75,1 10,1C5.25,1 4,4.27 4,6V19C4,19.33 3.9,21 2,21V23C4.93,23 6,20.61 6,19V6C6,5.88 6.05,3 10,3C13.83,3 14,5.7 14,6V7H12V5H10V6C10,6 10,7 9,7C8,7 8,8 8,8V20C8,20 8,22 13,22C13.24,22 14.13,22 17,22C22,22 22,20 22,20V8C22,8 22,7 21,7M15,19.4A3,3 0 0,1 12,16.4C12,14.4 15,11 15,11C15,11 18,14.4 18,16.4A3,3 0 0,1 15,19.4Z" /></svg>
2

Hi @Yongkee_Cho,

SVGs rendered as an <img> cannot be styled. What you could do is to create a custom icon font from the SVG images that you have and use this font instead of the default Material icon font.

  1. You can use a free online tool to create the icon font, IcoMoon for example IcoMoon App - Icon Font, SVG, PDF & PNG Generator

  2. Load the custom font via CSS

<style>
    @font-face {
        font-family: 'MyCustomFont';
        font-style: normal;
        font-weight: 400;
        src: url('fonts/MyCustomFont.woff2') format('woff2');
    }

    .my-custom-font {
        --rz-icon-font-family: 'MyCustomFont';
    }
</style>
  1. Set the my-custom-font CSS class to the component you'd like to use the icons with. In your case that is RadzenPanelMenu

You can also see this approach shown as an example of using RadzenIcon with other icon fonts at the bottom of the Icons demo.

1 Like