title: Preloaded svg is being loaded again by Angular
body: <p>I'm just trying to preload a svg sprite in my angular application (index.html):</p>
  <pre><code>&lt;link rel=&quot;preload&quot; href=&quot;assets/img/logos/app_white_full.svg&quot; as=&quot;image&quot;&gt;
  &lt;link rel=&quot;preload&quot; href=&quot;assets/icons/font/symbol-defs.svg&quot; as=&quot;image&quot; crossorigin&gt;
  </code></pre>
  <p>The file &quot;app_white_full.svg&quot; is being loading once, great!
  But the other one, &quot;symbol-defs.svb&quot; which is a svg sprite, is being loaded again by Angular (lines 3 and 8):</p>
  <p><a href="https://i.stack.imgur.com/6On1z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6On1z.png" alt="enter image description here" /></a></p>
  <p>The only difference between those calls that I could see is the Request Headers.</p>
  <p>&quot;symbol-defs.svg&quot; from index.html has:</p>
  <pre><code>Sec-Fetch-Mode: cors
  </code></pre>
  <p>And &quot;symbol-defs.svg&quot; from an Angular component has:</p>
  <pre><code>Sec-Fetch-Mode: same-origin
  </code></pre>
  <p>I don't if it's the issue. Why the other file is ok?</p>
  <p>Additionally, I got this message on the console log:</p>
  <blockquote>
  <p>The resource http://localhost:8080/assets/icons/font/symbol-defs.svg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate <code>as</code> value and it is preloaded intentionally.</p>
  </blockquote>
  <p>Why is it not recognized as the same?</p>