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