Anchor hover with inline SVG and text - html

Question

Not sure how to accomplish this, but I have an SVG inline with some text wrapper in an anchor tag. But the SVG isn't changing color when hovering over the anchor as a whole, just the text. Once you hover over the SVG, it will change color, but I'm wondering how get to to trigger the hover state as a whole.
CSS:
a, a svg {
color: #fff;
}
a:hover {
color: #111;
}
a svg:hover {
fill: #111;
}
HTML:
<a href="https://facebook.com/username" target="_blank">FACEBOOK
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
</svg>
</a>
I could have swore I've had this working somewhere else before not sure why it wouldn't work here.

Answer 1

Give the path an attribute fill="currentColor", and it will inherit the fill color from its parents.
a {
color: #fff;
}
a:hover {
color: #111;
}
<a href="https://facebook.com/username" target="_blank">FACEBOOK
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="currentColor" d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
</svg>
</a>

Answer 2

The fill color of your svg is showing by default #111 so you need to change the fill color of the svg normal state in your CSS. I don't know if you meant to have the text as white but you can obviously change that if you need to.
a, a svg {
color: #fff;
fill: #FF0000;
}
a:hover {
color: #111;
}
a:hover svg {
fill: #111;
}
<a href="https://facebook.com/username" target="_blank">FACEBOOK
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
</svg>
</a>