title: Angular SVG gradient fill not rendering
body: <p>Initial apologies as I am not entirely familiar with all the exact terminology for what I'm trying to do: I am attempting to render an SVG icon using Angular (12).  A (trimmed down) version of my SVG (<code>discover.svg</code>) is:</p>
  <pre><code>&lt;svg id=&quot;discover&quot; viewBox=&quot;0 0 38.257 24.47&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;defs&gt;
      &lt;radialGradient id=&quot;grad2&quot; gradientUnits=&quot;userSpaceOnUse&quot; cx=&quot;17.278&quot; cy=&quot;10.17&quot; r=&quot;2.906&quot;
        gradientTransform=&quot;matrix(-1.320119, -1.659667, 1.942541, -1.545116, 24.895274, 56.860206)&quot;&gt;
        &lt;stop offset=&quot;0&quot; style=&quot;stop-color: rgb(238, 143, 48);&quot; /&gt;
        &lt;stop offset=&quot;0.5&quot; style=&quot;stop-color: rgb(255, 80, 0);&quot; /&gt;
        &lt;stop offset=&quot;1&quot; style=&quot;stop-color: rgba(40, 14, 6, 1)&quot; /&gt;
      &lt;/radialGradient&gt;
    &lt;/defs&gt;
    &lt;path id=&quot;Path_14883&quot; data-name=&quot;Path 14883&quot; d=&quot;M18.366-198.8l37.986,0v24.192H18.37Z&quot; transform=&quot;translate(-18.231 198.943)&quot; fill=&quot;#fff&quot; /&gt;
    &lt;path id=&quot;Path_14884&quot; data-name=&quot;Path 14884&quot; d=&quot;M87.316-135.9s-10.38,7.325-29.39,10.6h29.39Z&quot; transform=&quot;translate(-49.33 149.496)&quot;
      style=&quot;fill: rgb(255, 80, 0);&quot; /&gt;
    &lt;circle style=&quot;fill: url(/assets/img/icons/discover.svg#grad2);&quot; cx=&quot;20.063&quot; cy=&quot;10.251&quot; r=&quot;2.906&quot; /&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>The Angular component code that renders the icon is:</p>
  <pre><code>@Component({
    selector: 'my-icon',
    template: `
      &lt;svg width=&quot;1em&quot; height=&quot;1em&quot;&gt;
        &lt;use [attr.href]=&quot;getIconUrl()&quot;&gt;&lt;/use&gt;
      &lt;/svg&gt;
    `
  })
  </code></pre>
  <p><code>getIconUrl()</code> gets the right URL to pull in the SVG (<code>http://localhost:8080/assets/img/icons/discover.svg#discover</code>), and the SVG is displayed with the orange &quot;swoosh&quot; at the bottom, but I can't get the radial gradient fill to display - it's just empty where it should be.  The fill URL looks right in chrome dev tools (<code>http://localhost:8080/assets/img/icons/discover.svg#grad2</code>) but nothing displays.</p>
  <p>If there's anything else I need to provide - please just let me know.</p>
  <p>Here's the full HTML as it renders in Chrome:</p>
  <pre><code>&lt;my-icon ng-reflect-icon=&quot;discover&quot; title=&quot;discover&quot;&gt;
    &lt;svg width=&quot;1em&quot; height=&quot;1em&quot;&gt;
      &lt;use href=&quot;http://localhost:8080/assets/img/icons/discover.svg#discover&quot;&gt;
        #shadow-root (closed)
        &lt;svg id=&quot;discover&quot; viewBox=&quot;0 0 38.257 24.47&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
            &lt;path id=&quot;Path_14883&quot; data-name=&quot;Path 14883&quot; d=&quot;M18.366-198.8l37.986,0v24.192H18.37Z&quot; transform=&quot;translate(-18.231 198.943)&quot; fill=&quot;#fff&quot;&gt;&lt;/path&gt;
            &lt;path id=&quot;Path_14884&quot; data-name=&quot;Path 14884&quot; d=&quot;M87.316-135.9s-10.38,7.325-29.39,10.6h29.39Z&quot; transform=&quot;translate(-49.33 149.496)&quot; style=&quot;fill: rgb(255, 80, 0);&quot;&gt;&lt;/path&gt;
          &lt;circle style=&quot;fill: url(/assets/img/icons/discover.svg#grad2);&quot; cx=&quot;20.063&quot; cy=&quot;10.251&quot; r=&quot;2.906&quot;&gt;&lt;/circle&gt;
        &lt;/svg&gt;
      &lt;/use&gt;
    &lt;/svg&gt;
  &lt;/my-icon&gt;
  </code></pre>