How to Use Google Font Icons, Material Symbols, Material Icons, Variable Font Icons | Full Guide

Google offers free fonts and free web font icons. If you notice, at google fonts page, there is another link 'icons'. These are free to use flexible web font icons better than font awesome. These icons have two flavors. Material Symbols and Material Icons. In this video we are going to learn how can we use material symbols and material icons in simple projects. In this tutorial you will learn how to use variable icon font, how to use google material symbols, how to use material icons google fonts, how to use google web font icons, how to use google font icons, how to use google material icons, how to use google text icons, how to use google fonts icons and how to use google icons.

If you want to use Google Font Icons in 'design tools' like Figma, they have got Figma plugins as well. And for the web, Material Icons are available in five styles and a range of downloadable sizes and densities. The icons are based on the core Material Design principles and metrics. You can select the icon, choose density, size, color and get the code or you can also download it in SVG or PNG format. These icons are available for multiple platforms like web, Android, iOS and Flutter. Styles include outlined, filled, rounded, sharp or two tone.

We can link css file for material icons and icon code to display the icons. There are other CSS options as well, because icon are available in other shapes as well like outlined, filled, rounded, sharp and two tone. We have linked additional CSS files as well. And then we can use class name based on style we want to display relevant icon.

Just get the icon name from library, link appropriate CSS and use the icon. Regular CSS properties like color and font size can be used to change icon color and size.

Then we have got Material symbols. One way to use Material symbols icons is by using static icon font. In this case we will link CSS and use html code for the icon. But I will recommend using 'variable icon font'. This is second way and it is better and more flexible.

Material Symbols are newest icons containing over 2,500 symbols in a single font file with a wide range of design variants. Symbols are available in three styles of outlined, rounded and sharp and four adjustable variable font styles of fill, weight, grade, and optical size. CSS file that will be linked, will determine icon style like outlined, rounded or sharp. To use icon, click any icon, copy CSS file, style and icon code from code bar and use in web page.

Variable icon font has got one font file containing all variants of icons. Font variation settings in CSS allows you to change icon style easily. We can adjust fill, icon weight and other properties. If we want to use icon by using before or after pseudo class, we can do so. So this is how we can use variable font icons from Google font icons.

And if concept of 'variable icon font', or 'font variation settings' is new to you. Have a look at MDN resources like 'font variation settings' and 'Variable Fonts Guide' to know and use it better.

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#fonts #googlefonts #iconfonts #google #WebStylePress #WebDevelopment

[rishikeshsarangi]

Thank you so much, I was going crazy wondering why my outlined icons weren't working

[thomastthai]

Thanks for the video. You showed how you can have outlined, rounded, filled, etc all together for the font icon. For symbols, how do you do rounded outline and rounded filled simultaneously using variable font? They use the class '.material-symbols-rounded' even though the fill 'font-variation-settings' is different.

[alpha-boy_]

I'm from odisha than you for this video

[CM_YT]

is there any way to change the size of the icon, within CSS, and not within html

[abelabbesnabi]

Hello, question: How can I use material symbols with Fill: 0 and Fill: 1 in the same file? I wanna have available to me outlined icons with fill 0 and fill 1. An example would be a heart. If someone liked something, I show a filled heart, if someone hasn't liked it yet, I show an outlined heart. I can't find any documentation on that.

[DaveJordan-sb]

Google has all of my contacts and don't why they took
My Contact won't give back been trying for five fucking month to get em back want all family we another Death In family hot as firecracker