Instructor: [00:00] I have a skeleton of a web page, a header and a footer. The CSS has some displaced styling predefined. I've set the footer to use flexbox for its layout for the four icons I will place here. To use the ionicon library, I need to add a script tag to my web page. Basically, we're pulling in the package from unpackage.com. Now I can use the <ion-icon> tag in my HTML.

[00:31] Don't worry about compatibility with older browsers. These web components were built using Stencil. That toolkit handles any polyfills that might be needed.

[00:42] Let's add four icons to my footer. I will add the home icon. I will also set the size of the icon with the size attribute. This can be either small or large. This attribute is naturally not required. Next, I'm going to add a search icon and then one for notifications. The last icon will be the mail icon.

[01:07] Ionicons have been updated to reflect the current iOS and Material Design styling. If I want to specify a certain platform type, I just need to pre-pin the platform ID to the icon name. By default, the library will use a Material Design style. Let's change the home icon to use the iOS style. I'll just add ios- in front of home. There, now the icon will use the iOS style.

[01:36] One of the advantages of using SVGs instead of a web font, which the ionicons used to use, is that it's easy to change the color of the icon. The icons are colored black by default. We can change this by simply using CSS. We'll set the ionicons in the footer to be white.

[01:57] Finally, the ionicons can also use any SVG as their source. Let's make an egghead.io icon -- ion-icon, then the source, the path to SVG. There, we have an egghead icon as well.

[02:16] Visit ionicons.com to see all the icons you can use and further how to use them.

Create Icons in Any Project with the IonIcon library

Social Share Links