How can I use a Material Design Icon as a CSS background-image value?

Question

I am using materializecss so I already have the material design icons available. How can I use them as background-image value in my CSS code (SASS actually)?

Answer 1

Another technique you could use if you're using the Material Icons Font is making use of the :before and :after pseudo selectors + html entities .

CSS (codepen example)

    /* imports the font */
    @import url("https://fonts.googleapis.com/icon?family=Material+Icons");

    /* adds icon in front of the element */
    .someclass:before { 
        /* https://github.com/google/material-design-icons/blob/master/iconfont/codepoints */
        content: "\E3E7"; 
        font-family: "Material Icons"; 
    }

(here is the link to the icon codes )

It's not exactly a background-image but still could be useful.

Answer 2

You can use the Material Design Icons' SVG code to set a background-image, like so, for example:

.selector {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="%232196F3" d="M 5,3L 19,3L 20.7359,6L 20.7304,6C 20.9018,6.29149 21,6.63428 21,7L 21,19C 21,20.1046 20.1046,21 19,21L 5,21C 3.89543,21 3,20.1046 3,19L 3,7C 3,6.638 3.09618,6.29846 3.26437,6L 3.26135,6L 5,3 Z M 5.57294,4L 5,5L 5,5L 19,5L 18.4303,4L 5.57294,4 Z M 7,12L 12,17L 17,12L 14,12L 14,10L 10,10L 10,12L 7,12 Z "></path></svg>');
}

A fiddle

Quirks I noticed / was reminded of while making the fiddle:

• It doesn't seem to work without the xmlns attribute
• A # in the fill or elsewhere needs to be escaped with %23 (or use the rgb(a) value instead)
• You may need to adjust width and height and viewBox attributes depending on your needs (whether to fill the area, repeat or not (which you can also affect with background-repeat ), etc.)