How to set CSS content property using Google Material icon?

Question

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

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

Answer 1

2018 update

Google has removed codes that were previously displayed for IE9 and below. To get codes, visit the code points file in the GitHub repository.

Link to code points in the GitHub repository: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

---

Step 1. Include a material icon 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 e5cc value is the code you see for the chevron.

Answer 2

 ::before { font-family: 'Material Icons'; content: "\E87C"; } ::after { font-family: 'Material Icons'; content: "face"; } 

http://codepen.io/estelle/pen/MwvOjd

Answer 3

Try it.

 .bullet li a:before { font-family: FontAwesome; content: "\f054"; } 

You can refer to here for content values.

Answer 4

You can use this for rtl mode:

 .bullet li a:before {content: '\E5CB';} 

Answer 5

If you've already enabled minimized CSS with materialdesignicons.com, just use the Material Design Icons font family instead:

 ::after { font-family: 'Material Design Icons'; content: "\f054"; } 

There is also a convenient cheat sheet .