Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Material Icons, Outlined, Rounded, Two-Tone, Sharp sets are not working

I'm trying to use the Material Icons font from Google Outlined set that just came out, but I can't figure it out. There is no information nor documentation. Some icons are being displayed as filled and some as outlined.

eg: The account_circle icon from the Outlined set

How are you supposed to use the Outlined set? Any help is appreciated.

like image 200
amarinediary Avatar asked May 10 '18 10:05

amarinediary


People also ask

How do you outline a material icon in HTML?

Use the icon by adding the following classes to the <i> tag: material-icons-new class. Icon name as shown on the material icons demo page, prefixed with the theme name followed by a hyphen.

How do I change the color of the material icon on Google?

$(". material-icons"). css("color", themeColor); This will change color of the material icons inside an element eg input field.

Are Google icons free for commercial use?

Licensing. We have made these icons available for you to incorporate them into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.


2 Answers


Update as of 2021

In short Google isn't (still) advertising the fact that you can load the different set via the Google Apis url on the Material Icons website. They are only, as per Google Material Icons instructions, talking about the default filled set which uses the following html tag to enqueue the Material Icons base stylesheet.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

If you want to use the Outlined, the Two Tone, Round or Sharp sets, you need to add the following to the Material Icons url.

Theme URL parameters CSS class
Filled (Default) ?family=Material+Icons material-icons
Outlined ?family=Material+Icons+Outlined material-icons-outlined
Two Tone ?family=Material+Icons+Two+Tone material-icons-two-tone
Round ?family=Material+Icons+Round material-icons-round
Sharp ?family=Material+Icons+Sharp material-icons-sharp

Better performances

Like Google text-based font, Google Material Icons also accept the &display=swap url parameter.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">

You can learn more about &display=swap @ https://developers.google.com/web/updates/2016/02/font-display

You can also specify a <link rel="preconnect" tag in the <head> of your document to improve load performances.

<link rel="preconnect" href="https://fonts.gstatic.com">

Example

<!--head-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
<!--body-->
<span class="material-icons-two-tone">
account_circle
</span>
<span class="material-icons-two-tone">
check_circle
</span>
<span class="material-icons-two-tone">
favorite
</span>
like image 138
amarinediary Avatar answered Sep 22 '22 10:09

amarinediary


Update, with Answer:

Looking at the Readme in the source code, https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons

You Append Outline to the icon name. So for you:

import { AccountCircleOutline } from "@material-ui/icons";

or

import AccountCircleOutline from "@material-ui/icons/AccountCircleOutline";

I do believe this answers your question. A "correct answer" is always nice! Thanks!

like image 30
TallOrderDev Avatar answered Sep 22 '22 10:09

TallOrderDev