And today I want to show you how to use iconography on your Web sites or your Web applications using the Iron Icons Library.

So basically I own icons is a free and open source icon set containing over 700 icons for both the IOS and material design style.

So you can choose one of these two souls and use it for your icons.

So it actually comes packaged with the Ionic framework itself.

But you can use it without the Ionic framework.

So we're gonna learn how to do that in this video.

So the first thing to do is to actually install the icon set in your HT Mel Farr.

So we can go to your iron icons dot com forward slash usage and then scroll down to the installation section.

We can now copy and paste this script tag inside out.

Html fall.

So, for this far out here, it looks like this.

We can just go down here and paste it right below the finishing so wth e end off the body type.

So now we have the ark onset installed inside the HTML foe.

We can now use it Very simply, I guess so.

The way this works is that each icon has its own web component.

So to use an icon below the H one tag, we can create a new tack.

It will be the ion dash eye contact.

So this is a custom web component for the iron Icon framework.

So the Iron Icon, our conceptual library.

Okay, so, um, to specify what icon you want, you can do so using the name attributes.

So inside here, we're gonna talk about name equal to your empty string.

Finnell.

We're gonna fill this with a prefix off the design to use, followed by the actual icon name.

So back to the Iron Icons website.

We could go over to the Ark on section and then choose one of these are cons.

Let's choose the app spike on as an example.

Not so.

If I choose this, we get the name off the Yarkon.

It's called Apse, so I can simply put taps inside here.

So if you're using the iron icons, I can't sit with the Ionic framework.

You can simply do this and you're done.

The design style is going thio automatically be chosen based on the three OS, all the device it's running on.

But in this video, we're looking at using it without the Ionic framework.

So we have to actually specify the top of designed to use.

So we have we have the material design or the iris design or stop so we can see the difference between these two designs right here.

So to specify the actual design stole, we can pre fix it with honor MD or IOS.

So, for example, let's talk a m d dash APS just like that.

So now this for dinner and s Beijing off the apse icon for material design so I can save this and refreshed my browser.

And we get this right here and spg for the apse icon in material design like a perfect.

So we can simply change this to Iris to achieve the Islas version off that Apsara, I can say Listen, refresh.

And we get this right here, okay?

So critical to actually customize these size and the color off these icons weaken Do so using a CSS or in the case of the size, we can use an attribute.

So it was that all I can say space and say size is equal to lodge to create a large park on.

I can save this and be fresh.

I have to get a bigger icon right there.

Okay, so to actually do that using CSS, it's quite straightforward as well.

I'll give you this and go inside a new style tech, and we're gonna target every aisle icon element inside the weapon.

So top at eye on a dish I can't inside.

Here we can put a font size property so we can say fun size and the documentation recommends you use font sizes in multiples of act.

So, for example, 8 16 32 or 64 so on.

So let's say 64 pixels for these particular size.

I couldn't save this Hendrik fresh and we get a much larger like a perfect.

We can also customize the color by using the ceases color, property color and then blue.

Okay, I can say this and refresh.

And now we get this right here.

And that's how you can use the iron.

Arkan's friend work What?

Sorry, the on icons library to achieve iconography inside your websites or your Web applications.

But thanks for watching.