SVG in HTML takes up too much space

What I want is to use icons from "Path" definition inside SVG. But when I try to apply this to our dialogs, the SVG claims way to much space.

I can control it somewhat, by forcing a width style on the SVG, but I don’t want that because not all icons have the exact same dimension.

The common suggestion (also by gpt) is to set the viewbox. But when I do that I get results I also don’t understand. When I keep the surrounding div, and I set viewbox 0 0 40 40, the svg simply is not visible anymore. When I remove the surrounding div, and use the same values for the viewbox, the icon is huge.

For reference, the Path I am trying to render

"<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z\"/>";

The HTML

<div style="display: flex; align-items: center">
    <svg viewBox="0 0 40 50" xmlns="http://www.w3.org/2000/svg">
        @((MarkupString)IconPath)
    </svg>
    <h3 style="margin-left: 15px;">@MudDialog!.Title</h3>
</div>

PS: we are using Blazor, but even when I use plain HTML just to practice, I get nothing close to what I am trying to achieve.

You need to sign in to view this answers