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

css material-design google-material-icons contentproperty
Max picture Max · Oct 22, 2016 · Viewed 35.3k times · Source

How can I insert the Google Material Icon "chevron icon right" (https://design.google.com/icons/#ic_chevron_right) in the following CSS content property:

.bullet li a:before {
    content: "";
}

Answer

Sarvap Praharanayuthan picture Sarvap Praharanayuthan · Oct 22, 2016

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/iconfont/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 Icons";
    content: "\e5cc";
}

Explanation: The value e5cc is the code which you see for the chevron.

enter image description here

Related questions

Add custom icons with Material Icons

I am using the official google material icons: https://material.io/icons/ I want add some icons created by me, in svg. how can I do it?

Read More
Change the icon size of AngularJS Material icons

I have referenced then declared an icon <i class="material-icons">face</i> But how can I change the icon size? On oficial site https://design.google.com/icons/ I can see they using classes like class="…

Read More
How to add multiple classes in Material UI using the classes props

Using the css-in-js method to add classes to a react component, how do I add multiple components? Here is the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); Here is how I used it: return ( &…

Read More