Icon coloring problems

Issues
1

here is a short video showing the problem

which is that some svgs cannot be colored:
Video: Icon coloring problems

2

my solution to this will be an override prop where I manually give this particular instance of the component the icon as a child

3

Hello @johannes_horteis, please share the SVGs that are having issues with coloring. Or provide the project id so I can investigate further.

4
5

The fill property in your svg’s path needs to be set to currentColor. Here’s your svg with this change.

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.25" d="M3 9.4C3 7.15979 3 6.03968 3.43597 5.18404C3.81947 4.43139 4.43139 3.81947 5.18404 3.43597C6.03968 3 7.15979 3 9.4 3H14.6C16.8402 3 17.9603 3 18.816 3.43597C19.5686 3.81947 20.1805 4.43139 20.564 5.18404C21 6.03968 21 7.15979 21 9.4V14.6C21 16.8402 21 17.9603 20.564 18.816C20.1805 19.5686 19.5686 20.1805 18.816 20.564C17.9603 21 16.8402 21 14.6 21H9.4C7.15979 21 6.03968 21 5.18404 20.564C4.43139 20.1805 3.81947 19.5686 3.43597 18.816C3 17.9603 3 16.8402 3 14.6V9.4Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 15C19.5523 15 20 15.4477 20 16V18H22C22.5523 18 23 18.4477 23 19C23 19.5523 22.5523 20 22 20H20V22C20 22.5523 19.5523 23 19 23C18.4477 23 18 22.5523 18 22V20H16C15.4477 20 15 19.5523 15 19C15 18.4477 15.4477 18 16 18H18V16C18 15.4477 18.4477 15 19 15Z" fill="white"/>
<path d="M9 11C10.1046 11 11 10.1046 11 9C11 7.89543 10.1046 7 9 7C7.89543 7 7 7.89543 7 9C7 10.1046 7.89543 11 9 11Z" fill="currentColor"/>
<path d="M3 15.0875C3.00116 16.0588 3.0095 16.7991 3.06965 17.3959L6.40166 15.3357C6.86667 15.0481 6.92276 15.026 6.96158 15.016C7.0268 14.9993 7.09473 14.9958 7.16131 15.006C7.20094 15.012 7.25896 15.0283 7.75057 15.2676L8.27892 15.5247L8.36868 15.5685C8.74311 15.7517 9.11943 15.9357 9.52751 15.9895C9.88347 16.0364 10.2454 16.0061 10.5886 15.9006C10.982 15.7797 11.3225 15.5356 11.6612 15.2927L11.7424 15.2346L14.2481 13.4455C14.7946 13.0553 14.864 13.0246 14.9095 13.0125C14.987 12.9918 15.0684 12.9901 15.1467 13.0075C15.157 13.0097 15.2144 13.0224 15.4689 13.1819C15.937 13.4751 16.5541 13.3334 16.8473 12.8653C17.1405 12.3973 16.9987 11.7802 16.5307 11.487C16.2535 11.3134 15.9491 11.1368 15.5798 11.0549C15.1881 10.9681 14.7814 10.9767 14.3938 11.0801C13.9489 11.1989 13.5633 11.4755 13.179 11.7512L13.0859 11.8179L10.5802 13.6069C10.1011 13.949 10.0417 13.9764 10.001 13.9889C9.93238 14.01 9.86001 14.016 9.78881 14.0067C9.74664 14.0011 9.68349 13.984 9.15411 13.7263L8.62575 13.4692L8.54259 13.4286C8.19396 13.2581 7.84332 13.0867 7.46198 13.0287C7.1291 12.9781 6.78942 12.9952 6.46333 13.0791C6.08976 13.1752 5.75816 13.3811 5.42847 13.5858L5.34983 13.6346L3 15.0875Z" fill="currentColor"/>
</svg>
1 Like