Feather: Cannot read property toSvg

[kodeine]

Getting the following error, any idea's?

[colebemis]

Could you make a CodePen to reproduce this error? Here's a Feather CodePen template to get you started: https://codepen.io/pen?template=WOJZdM

[christophlieck]

I've had the same trouble when I tried to set the data-feather attribute dynamically in a php template:

<i data-feather="{icon}"></i>

Weird enough the dynamic replacement worked but all subsequent icons didn't render and throw this error.

[abner-carvalho]

I have the same error here, but in my case i'm using Wordpress.

When i put a feather icon in the_content() section i'm getting this error.

[wdebusschere]

This happens when the attribute data-feather is empty or when the icon doesn't exist..
data-feather=""

This should be fixed, because an empty or invalid icon name causes all icons to be NOT displayed

[emilas44]

we just need an if statement before rendering? To check if there is that icon?

[gamefanpage]

I have the same issue it's appear if you are not auth on your website and browse as guest
but if you are auth as admin or members no more errors

Uncaught TypeError: Cannot read property 'toSvg' of undefined
    at feather.min.js:12
    at feather.min.js:12
    at Array.forEach (<anonymous>)
    at Object.n.default [as replace] (feather.min.js:12)
    at terms:368

[locness3]

I have the same issue it's appear if you are not auth on your website and browse as guest ...

@gamefanpage Does it appear with empty icon names or always ?

_{Sent with GitHawk}

[kedomingo]

Hi, I encountered the same issue. What happened in my case was I mistyped one icon name (slider instead of sliders) but all the icons did not load. I must say it was kinda hard to debug.

To reproduce, here's the edited code from the codepen template above: https://codepen.io/kedomingo/pen/pogbLya

[adigunsherif]

This happens when you put in a non-existing icon name or you misspelt an icon name.

[parthdevloper]

If fixed this issue in ANGULAR 10

Here is my code :

<div class="card icon-card cursor-pointer text-center mb-2 mx-50" *ngFor="let dat of data | keyvalue">
     <div class="card-body">
         <div class="icon-wrapper">
              <i [data-feather]="dat.key"></i>
         </div>
       <p class="icon-name text-truncate mb-0 mt-1">{{ dat.key }}</p>
     </div>
</div>

component.ts

public  json = require('feather-icons/dist/icons.json');
public data;

ngOnInit() {
  this.data = this.json;
}

Here key element is square brackets I mean [data-feather].