Iconify Picker

<iconify-picker
  id="my-picker"
  collection="mdi"
  mode="button"
  button-label="Choose Icon"
></iconify-picker>

<script type="module">
  import IconifyPicker from 'iconify-picker';
  
  const picker = document.getElementById('my-picker');
  
  picker.addEventListener('icon-selected', (e) => {
    console.log('Selected:', e.detail.iconName);
  });
</script>

import { useEffect, useRef } from 'react';
import IconifyPicker from 'iconify-picker';

function MyComponent() {
  const pickerRef = useRef(null);

  useEffect(() => {
    const picker = pickerRef.current;
    if (picker) {
      picker.addEventListener('icon-selected', (e) => {
        console.log('Selected:', e.detail.iconName);
      });
    }
  }, []);

  return (
    <iconify-picker
      ref={pickerRef}
      collection="mdi"
      mode="button"
      button-label="Choose Icon"
    />
  );
}

<template>
  <iconify-picker
    ref="pickerRef"
    collection="mdi"
    mode="button"
    button-label="Choose Icon"
    @icon-selected="handleIconSelected"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import IconifyPicker from 'iconify-picker';

const pickerRef = ref(null);

const handleIconSelected = (e) => {
  console.log('Selected:', e.detail.iconName);
};

onMounted(() => {
  // Component is ready
});
</script>

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import IconifyPicker from 'iconify-picker';

@Component({
  selector: 'app-icon-picker',
  template: `
    <iconify-picker
      #pickerRef
      collection="mdi"
      mode="button"
      button-label="Choose Icon"
      (icon-selected)="handleIconSelected($event)"
    ></iconify-picker>
  `
})
export class IconPickerComponent implements AfterViewInit {
  @ViewChild('pickerRef', { static: false }) pickerRef!: ElementRef<IconifyPicker>;

  ngAfterViewInit() {
    // Component is ready
  }

  handleIconSelected(event: CustomEvent) {
    console.log('Selected:', event.detail.iconName);
  }
}

picker.addEventListener('icon-selected', (e) => {
  console.log('Icon:', e.detail.iconName)
  console.log('Collection:', e.detail.collection)
  console.log('Name:', e.detail.name)
  console.log('SVG:', e.detail.svg)
})

// Also fires 'change' event with same detail
picker.addEventListener('change', (e) => {
  console.log('Changed to:', e.detail.iconName)
})