How to force SVG icon to scale?

Below is a simple example of an SVG icon being displayed in a blue DIV. First, the CSS:

div.box {
    width: 72px;
    height: 72px;
    background-color: blue;
}

svg.icon {
    width: 72px;
    height: 72px;
    color: white;
    fill: currentColor;
}

... and now the HTML:

<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <g id="box-icon"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"></path></g>
        </defs>
    </svg>


    <div class="box">
        <svg class="icon" viewBox="0 0 72 72"><use xlink:href="#box-icon"></use></svg>
    </div>
</body>

See https://jsfiddle.net/b9fxvu7k/

Note that the DIV, the icon, and icon's viewbox are all sized to 72 pixels. But the browser insists on rendering the icon as 24 pixels no matter what size I specify for the DIV, icon, and viewbox. I need the SVG icon to scale up to the size of its container. Does anyone see what is missing? Or, is the SVG path I specified hardcoded to 24x24?

How to force SVG icon to scale?

1 Answers