29

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: "";
}
Max
  • 4,965
  • 17
  • 49
  • 64
  • TLDR they are called "Code point" on the icons directory, e.g. for the Arrow Upward icon the Code point content is `e5d8` which you would then reference in your CSS as `content: "\e5d8";` https://fonts.google.com/icons?icon.query=arrow – Jesse Nickles Nov 14 '22 at 10:04

7 Answers7

64

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

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

enter image description here

Sarvap Praharanayuthan
  • 4,212
  • 7
  • 47
  • 72
  • 12
    For modern browsers supporting the CSS feature [`font-feature-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings) you can simply use the icon's name instead of the code point: `.bullet li a:before { font-family: "Material Icons"; content: "chevron_right" }` – Joe Jun 25 '18 at 07:32
16
::before {
    font-family: 'Material Icons';
    content: "\E87C";
}

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

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

Daniel Delgado
  • 4,813
  • 5
  • 40
  • 48
  • 1
    Didn't realize you could refer to the icon directly by name in the `content` prop - neat tip! – Pa Ye Jun 14 '20 at 08:42
7

Update for 2022

Using the new Material Symbols Outlined

.selector::before {
    font-family: "Material Symbols Outlined";
    content: "\e5cc";
}

Reference here

Funk Doc
  • 1,473
  • 1
  • 11
  • 12
6

Try this.

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

You can refer here for content values

Bhavin Shah
  • 2,462
  • 4
  • 22
  • 35
2

If you already included the minified CSS from materialdesignicons.com then just use the Material Design Icons font family instead:

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

There is also a convenient Cheat Sheet available.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
andiF
  • 91
  • 1
  • 5
1

You can use this for rtl mode:

.bullet li a:before {content: '\E5CB';}
Imad Ghoummaid
  • 17
  • 3
1

Update on Jun 2021

The code points of Material Icons are in the Google Fonts webpage, in the section of Material Icons.

Step 1: Include the Material Icons Stylesheet.

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

Step 2: CSS Code.

::after {
    font-family: 'Material Icons';
    content: "/e5cc";
}

Explanation: The value e5cc is the code which you see for the chevron in the next link and image.

https://fonts.google.com/icons?selected=Material+Icons&icon.query=chevron

How to get the content code of chevron icon

Juan Pablo Risso
  • 11
  • 3