Materialize CSS provides a rich set of material icons of google which can be downloaded from Material Design specs. Icon libraries that are supported by materialize css are Google Material Icons, Font Awesome Icons and Bootstrap Icons. Different icons can be selected from Material Icons.
Library and Usage: To use these icon, the following line is added in the <head> part of the HTML code.
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
Then to use the icons, name of the icon is provided in the <i> part of HTML element.
Material icon sizes: Materialize CSS provides icons in four sizes: tiny, small, medium, large. The sizes for tiny, small, medium and large are 1 rem, 2 rem, 4 rem and 6 rem respectively.
<i class = "material-icons tiny">add</i> <i class = "material-icons small">add</i> <i class = "material-icons">add</i> <i class = "material-icons medium">add</i> <i class = "material-icons large">add</i>
- CSS | Icons
- How to target all Font Awesome icons and align them center?
- ReactJS | Icons
- Bootstrap 5 alpha | Icons Library
- How to use font-awesome icons from node-modules?
- How to place SVG icons on a round circle side by side to another div using Bootstrap?
- Materialize CSS | Preloader
- Materialize CSS | Colors
- Materialize CSS | Grids
- Materialize CSS | Tables
- Materialize CSS | Helpers
- Materialize CSS | Badges
- Materialize CSS | Breadcrumbs
- Materialize CSS | Media
- Materialize CSS | Buttons
- Materialize CSS | Footer
- Materialize CSS | Typography
- Materialize CSS | Collections
- Materialize CSS | Pagination
- Materialize CSS Navbars
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.