Retaining styles on custom SVG icons

[zigojacko]

I've followed your excellent tutorial here to add custom SVG icons but I'm losing the styling as they're designed.

Here is an example:

But it appears in the icon library like this:

Is there any way to retain the styling (colours) of them? I've kept the complete SVG code intact.

[ndiego]

Hi @zigojacko, thanks for creating this issue. Are you able to share the svg code here? I can then do some investigation. Thanks!

[zigojacko]

Hey @ndiego - sure, please see it below:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{fill:#42a5f5}</style></defs><g id="Ads_Block" data-name="Ads Block"><path class="cls-1" d="M44 2H4a4 4 0 0 0-4 4v28a4 4 0 0 0 4 4h4.52a13.74 13.74 0 0 1-.76-2H4a2 2 0 0 1-2-2V10h44v24a2 2 0 0 1-2 2h-3.76a13.74 13.74 0 0 1-.76 2H44a4 4 0 0 0 4-4V6a4 4 0 0 0-4-4zM5 7a1 1 0 0 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 0 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 0 1 0-2 1 1 0 0 1 0 2z"/><path class="cls-1" d="M16.89 26.55a1 1 0 0 0-1.78 0l-2 4c-.11.29-.11.14-.11 4.45a1 1 0 0 0 2 0v-2h2v2a1 1 0 0 0 2 0v-4c0-.34.05-.13-2.11-4.45zM16 29.24l.88 1.76h-1.76zM24 26h-2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a3 3 0 0 0 3-3v-4a3 3 0 0 0-3-3zm1 7a1 1 0 0 1-1 1h-1v-6h1a1 1 0 0 1 1 1zM32 30a1 1 0 0 1 0-2h2a1 1 0 0 0 0-2h-2a3 3 0 0 0 0 6 1 1 0 0 1 0 2h-2a1 1 0 0 0 0 2h2a3 3 0 0 0 0-6z"/><path d="M34.63 20.43C26.17 11.15 9 17.14 9 31a15 15 0 0 0 15 15c13.33 0 20-16.16 10.63-25.57zM24 18a13 13 0 0 1 8.45 3.14L14.14 39.45A13 13 0 0 1 24 18zm0 26a13 13 0 0 1-8.45-3.14l18.31-18.31A13 13 0 0 1 24 44z" style="fill:#424242"/></g></svg>

[ndiego]

Hi @zigojacko, my apologies, I just realized I never replied to this. 🤦‍♂️

The SVG above is applying the blue fill color using a CSS class. To work with the Icon Block, you need to apply the blue fill to each element directly. I will update that article to mention this. The revised SVG below should work for you.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g id="Ads_Block" data-name="Ads Block"><path class="cls-1" style="fill:#42a5f5" d="M44 2H4a4 4 0 0 0-4 4v28a4 4 0 0 0 4 4h4.52a13.74 13.74 0 0 1-.76-2H4a2 2 0 0 1-2-2V10h44v24a2 2 0 0 1-2 2h-3.76a13.74 13.74 0 0 1-.76 2H44a4 4 0 0 0 4-4V6a4 4 0 0 0-4-4zM5 7a1 1 0 0 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 0 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 0 1 0-2 1 1 0 0 1 0 2z"/><path class="cls-1" style="fill:#42a5f5" d="M16.89 26.55a1 1 0 0 0-1.78 0l-2 4c-.11.29-.11.14-.11 4.45a1 1 0 0 0 2 0v-2h2v2a1 1 0 0 0 2 0v-4c0-.34.05-.13-2.11-4.45zM16 29.24l.88 1.76h-1.76zM24 26h-2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a3 3 0 0 0 3-3v-4a3 3 0 0 0-3-3zm1 7a1 1 0 0 1-1 1h-1v-6h1a1 1 0 0 1 1 1zM32 30a1 1 0 0 1 0-2h2a1 1 0 0 0 0-2h-2a3 3 0 0 0 0 6 1 1 0 0 1 0 2h-2a1 1 0 0 0 0 2h2a3 3 0 0 0 0-6z"/><path d="M34.63 20.43C26.17 11.15 9 17.14 9 31a15 15 0 0 0 15 15c13.33 0 20-16.16 10.63-25.57zM24 18a13 13 0 0 1 8.45 3.14L14.14 39.45A13 13 0 0 1 24 18zm0 26a13 13 0 0 1-8.45-3.14l18.31-18.31A13 13 0 0 1 24 44z" style="fill:#424242"/></g></svg>