title: SVG vector image not showing on HTML element
body: <p>I am trying to create an icon button, everything works, except from the SVG image. When I add the SVG file as the <code>background-image</code> using CSS it doesn't seem to appear. I even tried using the <code>::before</code> pseudo-element (or class, am not sure which one it is). All the methods I have tried were all suggested by people on StackOverflow but I don't seem to understand why my own case is different. When I try to duplicate the code I find in the answers on StackOverflow, it works, but mine doesn't seem to work. Please, what am I doing wrong. I am new to CSS, HTML and Javascript.</p>
  <p>The HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --&gt;
      &lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src 'self'; script-src 'self'&quot;&gt;
      &lt;meta http-equiv=&quot;X-Content-Security-Policy&quot; content=&quot;default-src 'self'; script-src 'self'&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Untitled - NoteBook&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;../Styles/titlebar.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;../Styles/editorStyle.css&quot;&gt;
  &lt;/head&gt;
  &lt;script src=&quot;../UI/renderer.js&quot;&gt;&lt;/script&gt;
  
  &lt;body&gt;
      &lt;div id=&quot;container&quot;&gt;
          &lt;div id=&quot;titlebar-container&quot;&gt;
              &lt;div id=&quot;titlebar&quot;&gt;
                  &lt;div id=&quot;drag-region&quot;&gt;
                      &lt;p id=&quot;window-title&quot;&gt;Notebook&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div id=&quot;window-icon-container&quot;&gt;
                      &lt;button class=&quot;icon&quot; id=&quot;minimize&quot;&gt;
                      &lt;/button&gt;
                      &lt;button class=&quot;icon&quot; id=&quot;maximize&quot;&gt;&lt;/button&gt;
                      &lt;button class=&quot;icon&quot; id=&quot;close&quot;&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- &lt;div id=&quot;menubar&quot;&gt;&lt;/div&gt; --&gt;
          &lt;/div&gt;
          &lt;div id=&quot;split-container&quot;&gt;
              &lt;div id=&quot;note-list&quot; class=&quot;split&quot;&gt;
                  &lt;ul&gt;
                      &lt;li&gt;Note #1&lt;/li&gt;
                      &lt;li&gt;Note #2&lt;/li&gt;
                      &lt;li&gt;Note #3&lt;/li&gt;
                      &lt;li&gt;Note #4&lt;/li&gt;
                      &lt;li&gt;Note #5&lt;/li&gt;
                      &lt;li&gt;Note #6&lt;/li&gt;
                      &lt;li&gt;Note #7&lt;/li&gt;
                      &lt;li&gt;Note #8&lt;/li&gt;
                      &lt;li&gt;Note #9&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;textarea id=&quot;text&quot; class=&quot;split&quot;&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>The CSS</p>
  <pre><code>* {
      --transparent: rgb(0, 0, 0, 0);
      --medium-opacity: rgba(0, 0, 0, 0.2);
      margin: 0;
      outline: none;
  }
  
  #menubar {
      background-color: rgb(76, 25, 124);
  }
  
  #titlebar-container {
      top: 0px;
      height: 30px;
      text-align: center;
      position: fixed;
      line-height: 30px;
      
  }
  
  #titlebar {
      height: 30px;
      padding: 2px 2px 0px 2px;
      background-color: rgb(76, 25, 124);
      user-select: none;
  }
  
  #drag-region {
      width: 100%;
      height: 100%;
      -webkit-app-region: drag;
  }
  
  #window-title {
      font: menu;
      font-size: 12px;
      color:  rgb(226, 214, 236);
      height: 10px;
      background-color: var(--transparent);
      margin: 5px;
      z-index: 5000;
  }
  
  #window-icon-container {
      top: 0px;
      right: 0px;
      text-align: center;
      position: absolute;
      z-index: 3000;
      -webkit-app-region: no-drag;
      height: 32px;
      width: 138px;
      margin-left: auto;
      background-color: var(--transparent);
  }
  
  .icon {
      width: 46px;
      height: 100%;
      float: left;
      outline: none;
      border: none;
      background-color: var(--transparent);
      /* cursor: pointer; */
  }
  
  #close:before {
      content: url(/Icons/close.svg);
  }
  
  #minimize:hover {
      background-color: var(--medium-opacity);
  }
  
  #maximize:hover {
      background-color: var(--medium-opacity);
  }
  
  #close:hover {
      background-color: rgb(173, 30, 25)
  }
  
  *::-webkit-scrollbar-thumb {
      background: red;
      border-radius: 10px;
  }
  </code></pre>