title: How do I get an large icon align to the text in ::marker?
body: <p>I am using ::marker to display a material icon onto the left of the text. But the icon is not aligned to the text. How do I align it ?</p>
  <p><a href="https://i.stack.imgur.com/hGlub.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hGlub.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" &gt;
  &lt;title&gt;Material Icons&lt;/title&gt;
  &lt;link href='https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css' rel='stylesheet' type='text/css'/&gt;
  &lt;style type="text/css"&gt;
  #query_builder
  {
      display: list-item;
      margin-left: 50px; 
      font-size: 20px;           
  }
  #query_builder::marker
  {
      font-family: 'Material Icons';
      content: "query_builder";
      color:#b0bec5;
      border:1px solid #b0bec5;
      border-radius:5px;
      font-size:27.5px;       
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div style="width:240px;border:1px solid red;margin-top:0"&gt;        
          &lt;p id="query_builder"&gt;Takes Less Than &lt;strong&gt;10 Minutes to Complete!&lt;/strong&gt;&lt;/p&gt;
      &lt;/div&gt;    
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Even position:absolute; doesn't work in ::marker</p>