Customising the Icon Color for Custom Controls

Created by: analog-nico

I tried to style the custom checkbox by setting the color of the check mark to black. I expected that setting $custom-control-checked-indicator-color: $body-color; does the job but it doesn't work.

$custom-control-checked-indicator-color is applied to the color attribute of .custom-control-indicator. With that, I think, the author intended to enable what I want to accomplish. Instead, however, the fill attribute of the background SVG image needs to be changed. But $custom-checkbox-checked-icon as well as $custom-radio-checked-icon hardcode fill='%23fff'.

That said, of course I can now overwrite the $custom-checkbox-checked-icon variable and hardcode a different fill value.

But there is a very neat Sass-based solution that allows to automatically compile the icon with the intended $custom-control-checked-indicator-color value: http://codepen.io/noahblon/pen/xGbXdV

The big question now is if the solution is helpful for everyone. For people like me who only want to change the colors it is definitely good. For people who want to use their own SVG icons might get confused when they just want to paste their own SVG string because they have to understand the function.