IONIC Section 4 - 4.10 Adding Icons and Using Slots

Click here for more videos available on our youtube channel !

Hello everyone, our app is starting to take shape and look quite nice without even writing a single line of CSS thanks to these beautiful styles brought by Ionic. This helps give us ideas, like composing a rich user interface with an attractive appearance and, as you will see, quite powerful and feature-rich components with little effort. It is true that I explained a lot, but in terms of code, we didn't write as much code and only worked in HTML. So we have our card with the 2 elements separate "header" and "content", now I also want to have a button to submit my entries here. So below "ion-item" I will insert our "ion-button", I'm going to add some text to it saying "Add expenses" and I'm going to duplicate it to get a "clear" button. Who will be in first place. So if we reload our application, we can see our 2 buttons, in themselves they are very visual, but we can give a different appearance. For example, I want my button "erase", have a red color and an underlined look, where there is no background color, just a border and text color, and I also want to have an icon indicating that this cancels the entry and clears the fields. And on the expense button, I also want an icon with a "+" symbol, leaving the style as is. So first, we will take care of the “delete” button, we can define the filling mode with the “fill” attribute. Of course, you can find other alternatives more customizable according to your tastes in the documentation, in this example I show you a fairly standard style. So I'm going to have fill="outline" and regarding the color, we will put “danger” which will be red. And so if we save and reload our application, we get this result. Alright, now we can move on to icons, so we go back on our documentation, and we can navigate directly to our “ion-icon” component, and it will direct you to a new page, because you could add it to any application, as a separate package, but the Ionic package we're importing from the CDN already has it included, so there's no need to do an additional import. So we are going to insert our “ion-icon” at the level of our “ion-button”, in front of the word “delete”. Now, such an icon takes a name attribute, which we will find in our documentation page. So I enter a keyword, I will put "delete", perfect, if I click on this trash can, I will have the code just below that I can copy by clicking on it. So we go back to our code, and we paste it. And now if we take a look at our app, we can see this rendering, which can be improved a bit further by clearly indicating to the icon where it should be found thanks to the “slots”. So quite simply, in our icon, we can designate a starting slot, by indicating "slot = start" and if we come back to our app, we can see that we have more space between the icon and the text, it looks a bit cleaner. Now it remains for us to introduce an icon for adding expenses, this is the perfect time for you to try for yourself to insert an icon like for our previous button, so I let you pause the video and practice. You succeeded ? First, let's find an icon that corresponds to the addition of our expenses. So I'm going to put "add" as a keyword, and I'm going to get the code from it that seems appropriate to me. So we copy the code next to our text, and we don't forget to insert the "solt=start". We reload our application, and here is the result. So these are standard buttons, now, what about spacing around buttons and alignment? How can this be achieved? This is what we will see in the next video.