WEBVTT 00:01.700 --> 00:02.150 Okay. 00:02.150 --> 00:04.760 So our application is here running. 00:04.760 --> 00:09.680 And we can actually display some information about clicked a movie here. 00:09.680 --> 00:12.680 But what we need to do is we need to display a rating as well. 00:12.680 --> 00:17.810 So to do that we will display some icons for that and we can import that. 00:17.840 --> 00:21.410 There are many different ways how you can import icons. 00:21.410 --> 00:30.140 You can use Fontawesome, you can use hero icons or Material library icons or Google icons and many, 00:30.140 --> 00:31.250 many, many more. 00:31.250 --> 00:35.150 But what I will do is I will give you show you how to use it. 00:35.150 --> 00:37.370 A huge library of icons. 00:37.370 --> 00:38.570 It's called react icons. 00:38.570 --> 00:45.440 Basically, that react icons will have a collection of all the others icons like you see a font, awesome 00:45.440 --> 00:48.170 five and six game icons, hero icons. 00:48.170 --> 00:49.520 All of it is here. 00:49.520 --> 00:55.040 So we need to install that package and then we can access all of that in one go. 00:55.040 --> 00:58.340 So what I will do is there is an installation here. 00:58.340 --> 01:02.240 So what we need to do is npm install react icons and save it. 01:02.240 --> 01:11.470 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 01:11.470 --> 01:12.100 save. 01:14.710 --> 01:17.440 Okay, this is done I this is done. 01:17.440 --> 01:21.220 I can do npm start and I will start my server. 01:21.220 --> 01:26.980 So what we how can we use it is basically we need to import icon that we like. 01:27.010 --> 01:28.750 And this is from different libraries. 01:28.750 --> 01:32.110 So you can see react icon for will be font awesome. 01:32.110 --> 01:35.080 And I will show you that in a second how we can find the one that we need. 01:35.110 --> 01:40.840 But if let's say I will want to use this one, as in they have it in there. 01:41.050 --> 01:48.040 And for example if I want to use it here, sorry, if I want to use it here, I will need to import 01:48.040 --> 01:51.670 that first and then I will need to use it inside. 01:51.670 --> 01:55.300 So fab here will be an icon that I want to display. 01:55.300 --> 02:01.300 So if I will save it now and go back to my application and I select one of this, you can see here I 02:01.300 --> 02:05.080 have that icon there because it is imported. 02:05.080 --> 02:07.300 We are not really interested in beer. 02:07.330 --> 02:10.120 What we are interested in having a different one. 02:10.290 --> 02:14.010 And so what we want to have, we want to have star. 02:14.040 --> 02:21.690 If I will use star, you will see a huge number of different icons that will have star in it. 02:21.720 --> 02:25.020 So it's up to you how you want to which one you want to use it. 02:25.050 --> 02:28.500 What I will go is I will go for this one. 02:28.920 --> 02:30.360 And for example like this one. 02:30.360 --> 02:34.740 And you can see here it is a star like this and you need to import it. 02:34.770 --> 02:39.000 If you click on any icon it will give you a place where you want to import. 02:39.000 --> 02:40.530 That's all for coming from far. 02:40.560 --> 02:41.610 You copy that. 02:41.610 --> 02:45.930 You go to your application and then we can import that. 02:45.930 --> 02:50.670 And instead of that beer we can actually put it our regular star there. 02:50.670 --> 02:54.150 So going back here you can see here I have a star. 02:54.180 --> 02:57.630 I can also have the second one as I'm coming here. 02:57.630 --> 02:58.620 This is empty one. 02:58.620 --> 03:00.360 And I also want to have this one. 03:00.360 --> 03:02.880 So I will copy that one as well. 03:02.880 --> 03:07.350 And I will have it handy for me to use it whatever I need it later on. 03:07.350 --> 03:15.090 So actually I don't need to if it's coming from the same for here, what I could do is I could actually 03:15.240 --> 03:18.090 Separated by the comma and have multiple of them. 03:18.090 --> 03:25.620 So if I will want to have this one as well, I could import that like that. 03:26.280 --> 03:31.590 So you see I go here and I have two icons for a star. 03:31.620 --> 03:34.560 One is empty and one is fulfilled. 03:34.560 --> 03:37.020 So this is how we use the icons. 03:37.020 --> 03:41.580 And as I said, like the number of icons we have here is just huge. 03:41.580 --> 03:46.650 So if you if you will go to any, any of this, you can go like uh under design. 03:46.650 --> 03:49.980 You can see here all of this will have a huge library. 03:49.980 --> 03:54.750 So I think this is most convenient way to use, uh, icons in react. 03:54.750 --> 03:59.970 But there are other ways, like if you use them for like, bootstrap has its own. 03:59.970 --> 04:05.730 If you have like Fontawesome, you could install Fontawesome library and use it Fontawesome. 04:05.730 --> 04:08.670 Or you can have like hero icons and you can do it separately. 04:08.670 --> 04:15.600 But if you use this kind of library, that will give you very easy way to use it in react, and that 04:15.600 --> 04:18.390 will combine all of them in one place. 04:18.390 --> 04:20.640 So I think that's the best choice you can have.