Okay.
So our application is here running.
And we can actually display some information about clicked a movie here.
But what we need to do is we need to display a rating as well.
So to do that we will display some icons for that and we can import that.
There are many different ways how you can import icons.
You can use Fontawesome, you can use hero icons or Material library icons or Google icons and many,
many, many more.
But what I will do is I will give you show you how to use it.
A huge library of icons.
It's called react icons.
Basically, that react icons will have a collection of all the others icons like you see a font, awesome
five and six game icons, hero icons.
All of it is here.
So we need to install that package and then we can access all of that in one go.
So what I will do is there is an installation here.
So what we need to do is npm install react icons and save it.
So let's do that I will go here and I will close my server for now and I will do npm install react icon
save.
Okay, this is done I this is done.
I can do npm start and I will start my server.
So what we how can we use it is basically we need to import icon that we like.
And this is from different libraries.
So you can see react icon for will be font awesome.
And I will show you that in a second how we can find the one that we need.
But if let's say I will want to use this one, as in they have it in there.
And for example if I want to use it here, sorry, if I want to use it here, I will need to import
that first and then I will need to use it inside.
So fab here will be an icon that I want to display.
So if I will save it now and go back to my application and I select one of this, you can see here I
have that icon there because it is imported.
We are not really interested in beer.
What we are interested in having a different one.
And so what we want to have, we want to have star.
If I will use star, you will see a huge number of different icons that will have star in it.
So it's up to you how you want to which one you want to use it.
What I will go is I will go for this one.
And for example like this one.
And you can see here it is a star like this and you need to import it.
If you click on any icon it will give you a place where you want to import.
That's all for coming from far.
You copy that.
You go to your application and then we can import that.
And instead of that beer we can actually put it our regular star there.
So going back here you can see here I have a star.
I can also have the second one as I'm coming here.
This is empty one.
And I also want to have this one.
So I will copy that one as well.
And I will have it handy for me to use it whatever I need it later on.
So actually I don't need to if it's coming from the same for here, what I could do is I could actually
Separated by the comma and have multiple of them.
So if I will want to have this one as well, I could import that like that.
So you see I go here and I have two icons for a star.
One is empty and one is fulfilled.
So this is how we use the icons.
And as I said, like the number of icons we have here is just huge.
So if you if you will go to any, any of this, you can go like uh under design.
You can see here all of this will have a huge library.
So I think this is most convenient way to use, uh, icons in react.
But there are other ways, like if you use them for like, bootstrap has its own.
If you have like Fontawesome, you could install Fontawesome library and use it Fontawesome.
Or you can have like hero icons and you can do it separately.
But if you use this kind of library, that will give you very easy way to use it in react, and that
will combine all of them in one place.
So I think that's the best choice you can have.