how's it going guys my name is dom and
today i want to show you how to use
iconography on your websites or your web
applications using the iron icons
library
so basically iron icons is a free and
open source icon set containing over 700
icons for both the ios and material
design styles so
you can choose one of these two cells
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
going to learn how to do that in this
video so the first thing to do
is to actually install the icon set in
your html file so
we can go to ionicons.com forward slash
usage and then scroll down to the
installation section we can now copy and
paste this script tag
inside our html file so
for this file right here
it looks like this
we can just go down here and paste it
right below the finishing sorry
the end of the body tag so now we have
the icon set installed inside the html
file we can now use it very simply okay
so the way this works is that
each icon has its own web component so
to use an icon below the h1 tag we can
create a new tag
it'll be the ion dash icon tag so
this is a custom web component for the
iron icon framework sorry the iron icon
icon set or library okay so
to specify what icon you want you can do
so using the name attribute so inside
here we're going to type out name
equal to an empty string for now
we're going to fill this with a prefix
of the design to use followed by the
actual icon name so back to the iron
icons website
we can go over to the icons section
and then choose one of these icons let's
choose the apps icon as an example
right so
if i choose this we get the name of the
icon it's called apps
so i can simply
put apps inside here
so if you're using the iron icons
icon set with the ionic framework you
can simply do this and you're done
the design style is going to
[Music]
automatically be chosen based on the
the os of 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 type of design
to use so we have we have the material
design
or the ios
design or style so we can see the
difference between these two designs
right here
so to specify the actual design style
we can prefix it with either md
or ios so for example let's type out md
dash apps just like that so now
this will generate an svg of the apps
icon for a material design
so i can save this and refresh my
browser and we get this right here an
svg for the apps icon in material design
okay perfect so
we can simply change this to ios to
achieve the ios version of that apps
icon
i can save this and refresh and we get
this right here okay so pretty cool
to actually customize this size and the
color of these icons we can do so
using a css or in the case of the the
size we can use an attribute so for
example i can say space and say size is
equal to large to create a large icon
i can save this and refresh and we get a
bigger icon right there okay so to
actually do that using css
it's quite straightforward as well
i'll get rid of this
and go inside a new style tag
and we're going to target every iron
icon element inside the web page so
we'll type our ion dash icon inside here
we can put a font size
property so we can say font size
and the documentation recommends you use
font sizes in multiples of eight so for
example 8 16 32 or 64 and so on so
let's say 64 pixels for this particular
size i can save this and refresh and we
get
a much larger icon okay perfect
we can also customize the color by using
the css color property
color
and then blue
okay i can save this and refresh and now
we get this right here and that's how
you can use
the iron icons framework or sorry the
iron icons library
to achieve iconography inside your
websites or your web applications right
thanks for watching
and i'll see you later