SOLVED: Problem changing icon in button element after duplication

Bugs
1

Browser: Chrome 144.0.7559.133
OS: Windows

Hi bricks team,

As you can see in the video below, after duplicating a button element that has an icon, when I change the icon, its size gets out of control. This only happens in the builder and the problem is resolved after reloading the builder. This problem seems to only occur with svg icons.

1 Like
2

I tried it with 2.2 RC2 with no issues … so does not seem like a bug.

https://streamable.com/ofdtaz

3

Hey @HOSEIN,

I can’t replicate the issue. Sadly, from your video, I don’t see if you have width & height defined on the SVG element?

Can you maybe copy-paste the original element, so I try it? You could also send em both SVG icons that you used, just to be sure.

Thank you,
Matej

4

Hi Matej and @shingen,

Thank you for reviewing and testing this report.

I don’t see if you have width & height defined on the SVG element?

I didn’t set a width and height. But by default, svg has a width and height of 24px.

Can you maybe copy-paste the original element, so I try it?

{"content":[{"id":"vovqye","name":"section","parent":0,"children":["tqdmma"],"settings":{}},{"id":"tqdmma","name":"container","parent":"vovqye","children":["vunnhd","jqyifs"],"settings":{}},{"id":"vunnhd","name":"button","parent":"tqdmma","children":[],"settings":{"text":"I am a button","style":"primary","icon":{"library":"custom_set_hbu7vqm9q","svg":{"id":3842,"icon_id":"icon_nn98zpz2a","url":"https://avangtheme.ir/wp-content/uploads/2025/04/setting-1.svg"}}}},{"id":"jqyifs","name":"button","parent":"tqdmma","children":[],"settings":{"text":"I am a button","style":"primary","icon":{"library":"custom_set_hbu7vqm9q","svg":{"id":3456,"icon_id":"icon_7uafem374","url":"https://avangtheme.ir/wp-content/uploads/2025/04/signpost.svg"}}}}],"source":"bricksCopiedElements","sourceUrl":"https://avangtheme.ir","version":"2.2-rc2"}

SVG icons

<svg data-name="lamp-charge-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M12 13.85a.754.754 0 0 1-.65-1.12l.85-1.48h-.84c-.5 0-.91-.22-1.13-.59-.22-.38-.2-.84.05-1.28l1.07-1.86c.21-.36.67-.48 1.02-.28.36.21.48.67.28 1.02l-.85 1.49h.84c.5 0 .91.22 1.13.59.22.38.2.84-.05 1.28l-1.07 1.86c-.14.24-.39.37-.65.37ZM14.77 19.75H9.26c-.44 0-1-.05-1.37-.43-.36-.37-.35-.83-.34-1.14v-.89c-2.52-1.68-4.18-4.6-4.18-7.38A8.62 8.62 0 0 1 6.6 3.17C8.65 1.52 11.34.9 13.97 1.48c2.5.55 4.66 2.22 5.78 4.47 2.17 4.37.08 9.1-3.26 11.35v.75c.01.29.02.82-.39 1.24-.31.3-.75.46-1.33.46Zm-5.73-1.51c.05 0 .12.01.21.01h5.52c.1 0 .17-.01.21-.02v-1.36c0-.26.14-.51.36-.64 2.96-1.79 4.92-5.88 3.05-9.63-.92-1.85-2.7-3.22-4.76-3.67-2.18-.48-4.41.03-6.11 1.4a7.127 7.127 0 0 0-2.67 5.58c0 2.78 1.92 5.18 3.82 6.33.23.14.36.38.36.64v1.35c.01 0 .01 0 .01.01ZM15.5 22.75c-.07 0-.14-.01-.21-.03-2.16-.62-4.43-.62-6.59 0a.76.76 0 0 1-.93-.52c-.12-.4.12-.81.52-.93 2.42-.69 4.99-.69 7.41 0 .4.11.63.53.52.93-.09.34-.39.55-.72.55Z"/>
</svg>

And

<svg data-name="wallet-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M17.74 22.75H6.26c-2.49 0-4.51-2.02-4.51-4.51v-6.73C1.75 9.02 3.77 7 6.26 7h11.48c2.49 0 4.51 2.02 4.51 4.51v1.44c0 .41-.34.75-.75.75h-2.02c-.35 0-.67.13-.9.37l-.01.01c-.28.27-.41.64-.38 1.02.06.66.69 1.19 1.41 1.19h1.9c.41 0 .75.34.75.75v1.19c0 2.5-2.02 4.52-4.51 4.52ZM6.26 8.5c-1.66 0-3.01 1.35-3.01 3.01v6.73c0 1.66 1.35 3.01 3.01 3.01h11.48c1.66 0 3.01-1.35 3.01-3.01v-.44H19.6c-1.51 0-2.79-1.12-2.91-2.56-.08-.82.22-1.63.82-2.22.52-.53 1.22-.82 1.97-.82h1.27v-.69c0-1.66-1.35-3.01-3.01-3.01H6.26ZM2.5 13.16c-.41 0-.75-.34-.75-.75V7.84c0-1.49.94-2.84 2.33-3.37l7.94-3c.82-.31 1.73-.2 2.44.3.72.5 1.14 1.31 1.14 2.18v3.8c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-3.8c0-.38-.18-.73-.5-.95-.32-.22-.7-.27-1.06-.13l-7.94 3c-.81.31-1.36 1.1-1.36 1.97v4.57c.01.42-.33.75-.74.75ZM19.6 17.8c-1.51 0-2.79-1.12-2.91-2.56-.08-.83.22-1.64.82-2.23.51-.52 1.21-.81 1.96-.81h2.08c.99.03 1.75.81 1.75 1.77v2.06c0 .96-.76 1.74-1.72 1.77H19.6Zm1.93-4.1h-2.05c-.35 0-.67.13-.9.37-.29.28-.43.66-.39 1.04.06.66.69 1.19 1.41 1.19h1.96c.13 0 .25-.12.25-.27v-2.06c0-.15-.12-.26-.28-.27Z"/>
</svg>

Thank you

5

If you do not define a width/height the default behavior is to apply 100% to both the height and width on the SVG.

svg[Attributes Style] {
   width: 100%;
   height: 100%;
}

Set a width/height and no issues. Or, setup a custom icon library and pull the icons from there and no issues.

1 Like
6

Hey @HOSEIN,

thank you so much for this. I was now able to replicate it and I’ve added it to our internal bug tracker.

Thank you,
Matej

2 Likes
7

@HOSEIN,

can you still replicate this one with the latest Bricks? I can’t replicate it anymore :frowning:

Matej

8

Hi Matej,

Yes, the problem seems to be solved.

Thank you very much

2 Likes
9

Thank you for confirming @HOSEIN :slight_smile:

Best regards,
Matej

1 Like