Adding icons is super straightforward
in a React Native app that uses expo.
We can get rid of the button import by the way,
we don't need the built-in button anymore
but back to the icons because an icon can be added by importing something from
and now it's @expo/vector-icons.
Might be a bit of a strange package name but that's just what it is,
it's part of the expo toolkit so to say, it's automatically included in any React Native project you
created with expo
and there you can import components that help you render icons and a pretty nice component there is
the ionicons component. For that, you simply have to know that there are different icon sets which
are built in into expo or into this vector icons package to be precise. Ionicons is one set of icons
managed by the team behind ionic in the end, so the icons which are included in that set are managed
by that ionic team and I'm really just talking about the icons here,
this has nothing to do with us adding anything from ionic to the React Native app, we're just using
their icons.
You also got other icon sets like evil icons, material icons, so a lot of icon sets you can use
and a great place to learn about all included icons and get an overview of all the included icons is
the official expo icons documentation which you find attached to this video as well,
a link to this documentation and there you can not only learn more about how to use them but you'll
also find that link to the icons directory and that is a long list of all the included icons you can use
and you always see to which icon package this belongs,
you can also search for icons there like remove to find all icons that have something to do with removing
stuff and then you see that there is something from the ionicons package, something from the material
icons package and so on.
Now the icons I searched for in advance are from the ionicons package.
So here, I'll import ionicons from @expo/vector-icons and this now automatically is a component we can
use in our jsx code to output an icon
and if we would have used material icons, that would also be a component just to output a material
icon
but I want to use an ionicon icon, so I'll use that and now I'll go down to the jsx code and instead
of using lower here, I'll actually output such an ionicon, such an icon here in my button and the great
thing is such an icon here can also be nested into our button even though what we're outputting here,
props children, is instead of a text node but that is supported, you can output an icon component in that
text component as well, so that will work.
So back to this ionicon here though, right now I'm not saying anything about the icon I want to use
and there, the icon I picked in advance has a name of md-remove.
Now you tell React Native and kind of expo that you want to use that icon by adding the name prop here
on ionicons and then this takes a string with the icon name which you find in that directory, right?
So here I picked this icon here which I want to use,
so that's the name, md-remove which we now use here.
So that's the icon name we added here.
Next you can also set up the icon size in pixels and here I'll go with 24 to have a nice big icon and
also the color this icon should have and here, I'll set this to have a white color.
Now I'll copy that and use the same on the greater button but there of course, the icon is a different
one,
here I picked md-add as an icon and you can of course explore that list of icons and pick different
icons if you want to and you can also try a different icon packages instead of ionicons or even use
two different icon packages in one and the same component.
You don't have to stick to one icon package only, you can mix and match them as you want,
so we could render an ionicon here and render a material icon here
but of course you should ensure that the overall look of your app makes sense.
So if you're mixing icons too wildly, chances are that it's not going to look that good,
so typically you want to stick to one set but you don't have to technically.
So here, I picked these two icons and now with that if we save this, we start a new game here.
Now we got a plus and a minus icon here to indicate whether the numbers should be lower or higher
and that is pretty nice in my opinion because that gives us a whole new way of building user interfaces
because with icons, we really have another important tool for building great user experiences.