google-material-icons – Tarik Billa

How to set the CSS content property with a Google Material Icon?

April 12, 2024 by Tarik

Update on 2018 Google removed the codes which were displayed earlier for IE9 and below. To get the codes visit the codepoints file in the GitHub repository. Link to codepoints in GitHub repository: https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints Step 1: Include the Material Icons Stylesheet. <link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”> Step 2 : CSS Code: .bullet li a:before { font-family: “Material … Read more

How to prevent material icon text from showing up when Google’s JS fails to convert them?

May 28, 2023 by Tarik

you can use font-display: block;, just add this CSS to your HTML head: <style> @font-face { font-family: ‘Material Icons’; font-display: block; } </style> for more information font-display

Align material icon with text on Materialize

April 22, 2023 by Tarik

I had the same issue for the longest time but found a solution that worked for me. First, give a custom class to the icon you want to center. Then, add a bottom vertical align and a font-size that matches or is smaller than the text it is placed next to. Also, don’t specify icon … Read more

How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

October 5, 2022 by Tarik

Update (31/03/2019) : All icon themes work via Google Web Fonts now. As pointed out by Edric, it’s just a matter of adding the google web fonts link in your document’s head now, like so: <link href=”https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp” rel=”stylesheet”> And then adding the correct class to output the icon of a particular theme. <i class=”material-icons”>donut_small</i> <i … Read more