How can you re-arrange the icon inside an ion-button


Hey Reader,

When you use the slot="end" in a button icon, the icon is placed to the right side of the button text, It renders the button and the icon close to each other.

I recently had a requirement to space them out so that the text was to the far left and the icon to the far right, as shown in the image below

After spending an embarrasing amount of time trying to access the shadow DOM to change the internals of the button without luck, a coworker suggested a simple try that got it to work.

Adding a left margin to the icon 🤦🏻‍♂️.

Click to see the full code snippets here.

P.S: Anything giving you trouble at the moment? Hit reply and let me know! I'd be happy to help 🙌🏽

Jorge Vergara

I share about how to build mobile apps that are fast, secure, maintainable, and scalable. -- Join my newsletter and I'll send you the new things I learn about building mobile apps.

Read more from Jorge Vergara

Hey Reader, Do you need to hide your Firebase API keys in your web or mobile apps? About 3 or 4 time a month someone asks this questions, they are worried that since our apps are client-side code (HTML, CSS, JS), someone can see their Firebase credentials and mess with their data. I understand why this is a concern. People want to keep their data private (ALL OF IT!). But there’s one thing we need to know about Firebase API keys. The fact that someone knows your apiKey is not a security risk...

Hey Reader, I started migrating an app to nextjs (coming from an Ionic with Angular background) because I wanted to learn more about the react ecosystem. Last night I went through the routing documentation on their site and created the placeholder files and folders for all the pages my app will need, and doing so, I learned a few things about the App Router that I wanted to share with you. Check out what I've learned about the NEXT.js app router. So far, I like the simplicity of it all,...

Hey Reader, After a little over a decade of working with Angular (ever since the days of Angular 1, now AngularJS) I decided giving react a serious chance, mostly due to what I’ve seen in my current job search, most of the job posts I see for front end developer have some sort of requirement for react. Yeah, even the “Angular Developer” roles have the line that says “3-4 years with react.js is preferred” 😅 Here is a collection of things I’ve learned about react APIs and how they compare to...