How to add svg icon on right side of Headline?

Hi there,

The icon in the headline block can only be added to the left side of the text.

However, you can add a custom class to the headline block, eg. switched-icon, then add this CSS to customizer > additional CSS:
https://www.screencast.com/t/zZZsd7FtKZ

.gb-headline.switched-icon {
    flex-direction: row-reverse;
}

Hello, thank you for your reply. I really appreciate your help. But will not custom CSS will load on all pages/post of website? Will not this add an extra code and create bloat to website and slow down speed. I will have to add code manually everytime where I want to switch icon place. Is it not better if you just add this feature in your theme. I think, just some line of code will be enough for this. Moreover it is just a basic features in other block editor based theme. So it really hurt when we look towards GP.:(

Hi Yogesh,

The Headline Block is part of GenerateBlocks, not GeneratePress Premium.

You can download a plugin called Simple CSS which allows you to add CSS to specific pages: https://docs.generatepress.com/article/adding-css/#simple-css

Alternatively, you can also use a Hook Element to add CSS specific to pages. Just enclose the CSS in <style> tags.

We tend to add only features that many users deem necessary to keep our plugins lightweight and high performing in comparison to others.

You may raise feature requests here though: https://community.generateblocks.com/c/feature-requests/6

Hi guys!
https://www.kleurintens.nl/verbouwen/isolatie/het-belang-van-goede-gevelisolatie/
I used the CSS code to get the icon at the right side. But now i have at the left side white space in H1.

i used this one
.gb-headline.switched-icon {
flex-direction: row-reverse;
}

Hi Max,

Try adding this code instead of that:

.gb-headline.switched-icon .gb-icon {
    order: 1;
}