How can I use a Material Design Icon as a CSS background-image value?
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.)
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.