Web Developer and Instructor sharing what I know about building mobile applications with web technologies such as Angular, Ionic Framework, Firebase, and nodejs
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
Web Developer and Instructor sharing what I know about building mobile applications with web technologies such as Angular, Ionic Framework, Firebase, and nodejs
Hey Reader, Changing the default styles of Ionic components can be a bit tricky since the components all use the shadow DOM, meaning we can't write CSS that targets the components inside the shadow DOM directly. Ionic has custom CSS variables in each component that allows us a lot of customization, and when those aren't enough, they expose CSS parts of the underlying HTML elements that form Ionic components. You can learn how to use shadow parts in this 3 minute video:...
Hey Reader, One cool thing about Ionic, specially when you're using capacitor, is that a lot of the functionality that you use in your mobile app can also be used for the web. Most of capacitor plugins have a web implementation, which means, you wouldn't have to write extra code to get it to work. Learn how to transform your Ionic app into a PWA. In today's article, you'll learn: How to use the `ng add` schematic to get all the boilerplate done for you. How to edit the `manifest` file to set...
Hey Reader, One cool thing about Ionic, specially when you're using capacitor, is that a lot of the functionality that you use in your mobile app can also be used for the web. Most of capacitor plugins have a web implementation, which means, you wouldn't have to write extra code to get it to work. Learn how to transform your Ionic app into a PWA. In today's article, you'll learn: How to use the `ng add` schematic to get all the boilerplate done for you. How to edit the `manifest` file to set...