Topics explored in this write-up are:
- What are Google Icons?
- How to add a Google Icon?
- Resizing a Google Icon
- Modifying the Color of a Google Icon
Let’s begin.
What are Google Icons?
Google provides a huge variety of icons (a total of 750) that are regarded as Material Design Icons. These icons are plain yet modern and represent actions or objects commonly used. For instance, a dustbin icon represents the “delete” action. These icons are supported by all present-day browsers. The screenshot attached below shows some of the material design icons.
Now that we know what google icons are, let’s learn how to add them to web pages.
How to add a Google Icon?
For the purpose of adding google material design icons to your websites follow the below-mentioned steps.
Step 1
First step is to add the link of material-icons font library in the <head> section of your HTML file. Here is how you do it.
Step 2
Once you have added the link of the material-icons library, the next step is to add the class “material-icons” in the <i> or <span> tag of the <body> section and also add the name of the icon.
Example 1
In this example, a settings icon is being added in the web page.
Output
Settings icon successfully added.
Example 2
In the example below, a logout icon is being added in the web page.
Output
Logout icon successfully inserted.
You can also alter the size of these material design icons using CSS. Let’s explore it in detail.
Resizing a Google Icon
You can alter the size of google material design icons according to your desire using CSS. Follow the steps mentioned in this section in order to resize your google material design icon.
Step 1
In the <style> tag using the material-icons class define the size of the icon, for example.
Step 2
Use the same class in the <i> tag along with the icon name.
Example
Suppose, you want to set the size of the settings icon to 48px.
Output
Size of the settings icon successfully changed.
Besides size, you can also modify the color of the google icons. Let’s see how it is done.
Modifying the Color a Google Icon
For the purpose of changing the color of google material design icons follow the same steps as mentioned in the above section with a slight difference that along with the font-size you can have to define the color using the color property of CSS.
Example
Suppose, you want to change the color of settings icon to blue.
Output
The color of the settings icon successfully changed.
Conclusion
To embed Google Icons in your HTML web pages you have to add the link of material-icons font library in the <head> section of your HTML file and then add the class material-icons in the <i> or <span> tag of the <body> section along with the name of the icon. You can also alter the size and color of the icons through CSS by defining them in the <style> tag using the material-icons class. This write-up discusses how to use google icons in HTML & CSS in depth with the help of appropriate examples.
