How to transform bootstrap icons from outline to fill using CSS - css

Question

I have been trying to change the bootstrap icon from outline to fill using stroke and fill.
For instance:
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
I have an outlined home icon:
How can I transfer it to this:
Dynamically using fill, stroke, and fill-rule. I have already tried changing the stroke and fill rule but I still cannot transform the first object to the second one. Is there any way I can do this?

Answer 1

The answer is no. There is no way to fill the inside of the house using CSS. At least not in a generic sense that would work with any shape *.
The reason is because the outline is the shape. The SVG contains two <path> elements.
the house outline.
the chimney
The house outline path consists of two subpaths. The first It contains two subpaths, one is the very outside border of the house shape and the second is the transparent hole in the middle.
If we split the first path into those two subpaths and colour them differently, you will see what is happening.
svg {
width: 300px;
height: 300px;
}
path:nth-child(1) {
fill: red;
}
path:nth-child(2) {
fill: yellow;
}
path:nth-child(3) {
fill: blue;
}
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<!-- path 1 subpath 1 - the outline (red) -->
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z"/>
<!-- path 1 subpath 2 - the house inside (yellow) -->
<path fill-rule="evenodd" d="M2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
<!-- path 2 - the chimney (blue) -->
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
If you want a filled version of the house, you would need to modify the SVG itself. Just remove the subpath for the "inside" of the house.
svg {
width: 300px;
height: 300px;
}
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
* Technically, you can achieve this with CSS. But the CSS would be specific to this particular icon, and not be generally applicable to other icons with the same issue.
Also, modifying paths this way is a new feature that is not supported by all browsers yet.
For instance, this example works in Chrome, but not Firefox.
svg {
width: 300px;
height: 300px;
}
path:nth-child(1) {
d: path('M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z');
}
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>