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

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