Cannot read property toSvg

Getting the following error, any idea's?

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

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.

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.

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

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

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

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}

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

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

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].

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

This was the problem in my case.

In my case it was icon name typo. Check if icon name exists.

You can use [attr.data-feather]="dat.key" instaed of [data-feather]="dat.key". Angular is binding attributes data base on [attr.AttributeName].

Same Problem here... Using python django with bootstrap...

checked typo, checked path...

the icon with the given address can be loaded by my browser but feather reports the same error...

replace.js:34 Uncaught TypeError: Cannot read properties of undefined (reading 'toSvg') at replaceElement (replace.js:34) at replace.js:19 at Array.forEach (<anonymous>) at Object.replace (replace.js:18) at 1:641

My problem was I fired a multi-rename in my IDE, and I accidentally updated an icon's name to a non existing one. I figured it out when I added some console debugging to feather.js.

Add these lines to node_modules/feather-icons/dist/feather.js in the replaceElement() function, before the .toSvg() call:

console.log(_icons2.default[name]);
console.log(name);
console.log('-----');

of course delete them after you end debugging.

The issue here is that's it's very hard to debug, if you have a lot of icons in your page. So far I use this code every time this issue appears, and then manually check against the website to see which icon is misspelled. Can we have a more graceful fallback that doesn't just ruin all the other icons.

$('[data-feather]').each(function (){console.log($(this).attr('data-feather'));});