JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="bg-patterns">
  <i class="material-icons" id="icon">pets</i>
</div>

<div class="with-icon-bg">
Hi! I'm paragraph with background made from ordinary HTML element! And BTW - I'm a pets lover, so I work only with firefox.
</div>

CSS

.material-icons {
  /* icon font */
  font-family: 'Material Icons'; 
  color: #ddd;
}

/* this is a wrapper for elements you want to use
as backgrounds, should not be visible on page */
.bg-patterns {
  margin-left: -90000cm; 
}

.with-icon-bg {
  /* all magic happens here */
  background: -moz-element(#icon);
  
  
  /* other irrelevant styling */
  font-size: 25px;
  width: 228px;
  margin: 0 auto;
  padding: 30px;
  border: 3px dashed #ddd;
  font-family: sans-serif;
  color: #444;
  text-align: center;
}