Troubleshooting

// Get list of available icons
const icons = IconSDK.getAvailableIcons()
console.log(icons)

// Check specific icon
console.log(IconSDK.hasIcon('home'))  // → true or false

console.log(IconSDK.version)  // Should print version number
console.log(IconSDK)  // Should print SDK object

<!-- Correct -->
<script src="https://cdn.icon.dev/id-your-project/sdk.min.js"></script>

<!-- Wrong -->
<script src="https://cdn.icon.dev/id-wrong-slug/sdk.min.js"></script>

IconSDK.clearCache()
IconSDK.reload()

// Preload icons above the fold
IconSDK.preload(['logo', 'menu', 'close', 'home'])

// Pause observer during bulk operations
IconSDK.stopObserver()

// Add icons
// ... your code ...

// Resume
IconSDK.init()
IconSDK.startObserver()

/* Your global styles might be affecting icons */
i {
  font-style: normal !important; /* Don't use !important */
}

svg {
  width: 100%; /* This can break icon sizing */
}

const icon = document.querySelector('[data-icon="home"]')
console.log(icon.innerHTML)  // Check SVG content

<!-- Check that attributes are applied -->
<i data-icon="home" data-icon-size="24" data-icon-color="#000"></i>

<!-- Ensure HTTPS on secure pages -->
<script src="https://cdn.icon.dev/id-project/sdk.min.js"></script>

<!-- Not HTTP -->
<script src="http://cdn.icon.dev/id-project/sdk.min.js"></script>

IconSDK.clearCache()
IconSDK.reload()

// Check observer status
if (IconSDK._config.observer) {
  console.log('Observer is active')
} else {
  console.log('Observer is stopped')
  IconSDK.startObserver()
}

IconSDK.stopObserver()
IconSDK.startObserver()

if (!window.fetch) {
  console.error('Fetch API not supported')
}

if (!window.MutationObserver) {
  console.error('MutationObserver not supported')
}