Resize svg image on MenuItem

Radzen.Blazor Components
1

The following code works just fine, but the image is way too big for the space.

<RadzenMenu Style="margin:0px;">
    <RadzenMenuItem Image="images/HistoryIcon.svg " >
    <RadzenMenuItem Text="View History"
        Icon="pageview"
        Style="color:black;background-color:white;"
        Path="SendGridHistory" />
   </RadzenMenuItem>
</RadzenMenu>

How do I scale it down to fit?

Thanks.

2

Hi @ChuckBerg,

You can usually set the size of the svg by editing the file itself. Otherwise you can set a custom class to your RadzenMenuItem and specify the size of the img element:

 <RadzenMenuItem class="item-with-icon" Image="images/HistoryIcon.svg " >

.item-with-icon img {
   width: 32px;
   height: 32px;
}
3

Thanks - I was missing "img" on my style when I attempted this solution.

But now I have 8px padding around the image that I'm trying to eliminate, but <... class="p-0 m-0" ... /> doesn't do the job, no matter where I put it.

4

Setting class="p-0 m-0" may not work as it will apply on the outermost HTML element. Use your browser's dev tools to locate the HTML element which has the unwanted padding and target it via CSS.

5

It's coming from rz-navigation-item-link. But if I write:

.rz-navigation-item-link {
    padding: 0px;
    margin: 0px;
}

nothing happens. And if I write:

.rz-navigation-item-link {
    padding: 0px !important;
    margin: 0px !important;
}

the padding/margin goes away, but everywhere. And that's not what I want either.

How do I apply this override in just this one place?

Thanks for your ongoing assistance. I know these are newbie questions.

6

You could use a nested selector to target that class:

.item-with-icon .rz-navigation-item-link {
    padding: 0px;
    margin: 0px;
}

(you may still have to use !important but you can try without it first).

7 
.item-with-icon .rz-navigation-item-link {
    padding: 0px !important;
    margin: 0px !important;
}

did the trick. Thanks again!