How to use Google's Material Icons on your Websites, Material Symbols, Material 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
Like the video
Share the Video
Subscribe to the channel