Material Icons Documentation

[saga]

Material Icons by Google: https://google.github.io/material-design-icons/
Material Icons Library: https://material.io/tools/icons/

This is an icon set by Google with its own self hosted icons in Google Fonts, making this the perfect substitute for FontAwesome for use in Dreamwidth Layouts since you do not need a host, and they have a library of references ready for use.

My CSS might not be 100% right now because I haven't put this into actual practical use yet, just been testing on old layouts. I'm also unsure if it calls everything but we'll see.

So this post is a Work In Progress, but I'm posting because if others need a head start on testing it out, feel free to. I will try to update it cos I have layouts that are already Material Icons ready, but good lord do I lack time.

Updated: 14 June 2019

Installation

In Custom CSS, declare the fonts as follows:

- Custom stylesheet URL: Add the following link https://fonts.googleapis.com/icon?family=Material+Icons
OR
- Using https://fonts.googleapis.com/icon?family=Material+Icons in a new browser > Click Enter > Copy + Paste the contents into Custom CSS.


How to use

IN POSTS

Follow the documentation as above if you're going to be using it in your posts.

NOTE: Your posts must use your journal layout as the skin, not the Default DW skins.


IN CSS LAYOUT CODES

Declaration will be inside the {} brackets like:

.whateverclassthisis {
font-size: Number em;
display: block;
font-family: Material Icons;
content:"face";
}

Using the Face Icon as an example. More CSS will have to be declared in it, such as styling, colour, etc.

Content will always be the declared name of the Icon, so refer to documentation as located: https://material.io/tools/icons/


How to Replace

TEXT

Pretend the CSS you are trying to replace has the class "replaced". You will use a :before or an :after call to replace it.

The following are some I've seen can work.

Example 1:

.replaced {
visibility: hidden;
position: relative;
}

.replaced:before {
visibility: visible;
display: block;
font-size: 2em;
font-family: Material Icons;
content:"face";
}

Example 2:

.replaced {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}

.replaced:after {
visibility: visible;
font-size: 1.5em;
font-family: Material Icons;
content:"face";
word-spacing:normal!important;
letter-spacing:normal!important;
}

Example 3:

.replaced {
font-size:0;
}

.replaced::before {
visibility: visible;
font-size: 1.5em;
font-family: Material Icons;
content:"face";
}



IMAGES

WIP (img display none and then declare a :before or :after probably)