16

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)?

Billybobbonnet
  • 3,156
  • 4
  • 23
  • 49
  • Looks like the docs show that SVGs are available, so you could probably do something like `background-image: url('data:image/svg+xml;utf-8,[put SVG code here]`. – Max Starkenburg Jun 20 '16 at 13:32
  • Thanks, it works like a charm. I was trying to import the font, but it seems it is not a proper css image value. Post this as an answer & I will close the question. – Billybobbonnet Jun 20 '16 at 13:41

2 Answers2

23

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.

mPrinC
  • 9,147
  • 2
  • 32
  • 31
Oneezy
  • 4,881
  • 7
  • 44
  • 73
  • 8
    Just to add more info... Actually, just this chunk is necessary: `.someclass:before { content: "\E3E7"; font-family: "Material Icons";}`. The declaration `content: "\E3E7";` sets the codepoint of the icon to be used. For example, you can use the code `\E312` as value of the `content` property to get a keyboard icon. Available material design icons codepoints: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints – Ivan Maia Feb 24 '18 at 11:17
21

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.)
Max Starkenburg
  • 1,499
  • 1
  • 15
  • 21