I’ve been using the SVG-mask-plus-background-color trick for a while to make sharp icons that can be colored to match nearby text. But I just learned today that they can inherit the text’s color automatically.
CSS has a keyword called
currentColor that represents the current
background-color: currentColor fills the icon with the same color as the text, so long as the icon is a sibling or descendant of the text element.
Can I Use reports support across the board. News to me.