How to use ionicons - 10 common examples

export function appInitialize(config?: IonicConfig) {
  const win: IonicWindow = window as any;
  const Ionic = (win.Ionic = win.Ionic || {});

  Ionic.config = config;
  applyPolyfills().then(() => defineCustomElements(win));

  // Icons that are used by internal components
  addIcons({
    'arrow-back-sharp': arrowBackSharp,
    'chevron-back': chevronBack,
    'chevron-forward': chevronForward,
    'close-circle': closeCircle,
    'close-sharp': closeSharp,
    'menu-outline': menuOutline,
    'menu-sharp': menuSharp,
    'reorder-two-sharp': reorderTwoSharp,
    'reorder-three-outline': reorderThreeOutline,
    'search-outline': searchOutline,
    'search-sharp': searchSharp,
  });
}

import './scripts/sliderJumpTo.js';
import './scripts/modalNotes.js';
import './scripts/modalRemoteControl.js';
import './scripts/remoteControl.js';
import './scripts/actions.js';
import './scripts/menu.js';
import './scripts/history.js';
import './scripts/fullscreen.js';
import './scripts/resize.js';
import './scripts/actionPlayPause.js';

import { defineCustomElements as ionicElements } from '@ionic/core/loader';
ionicElements(window);

import { defineCustomElements as ioniconsElements } from 'ionicons/dist/loader';
ioniconsElements(window);

// Init DeckDeckGo elements
import { defineCustomElements as deckDeckGoElements } from '@deckdeckgo/core/dist/loader';

import {defineCustomElements as deckDeckGoSlideTitleElements } from '@deckdeckgo/slide-title/dist/loader';
import {defineCustomElements as deckDeckGoSlideContentElements } from '@deckdeckgo/slide-content/dist/loader';
import {defineCustomElements as deckDeckGoSlideAuthorElements } from '@deckdeckgo/slide-author/dist/loader';
import {defineCustomElements as deckDeckGoSlideChartElements } from '@deckdeckgo/slide-chart/dist/loader';
import {defineCustomElements as deckDeckGoSlideYoutubeElements } from '@deckdeckgo/slide-youtube/dist/loader';
import {defineCustomElements as deckDeckGoSlideSplitElements } from '@deckdeckgo/slide-split/dist/loader';
import {defineCustomElements as deckDeckGoSlideCodeElements } from '@deckdeckgo/slide-code/dist/loader';
import {defineCustomElements as deckDeckGoSlideCountdownElements } from '@deckdeckgo/slide-countdown/dist/loader';
import {defineCustomElements as deckDeckGoSlideGifElements } from '@deckdeckgo/slide-gif/dist/loader';
import {defineCustomElements as deckDeckGoSlideQRCodeElements } from '@deckdeckgo/slide-qrcode/dist/loader';
import {defineCustomElements as deckDeckGoSlideBigImgElements } from '@deckdeckgo/slide-big-img/dist/loader';
import {defineCustomElements as deckDeckGoSlideVideoElements } from '@deckdeckgo/slide-video/dist/loader';

export function appInitialize(config?: IonicConfig) {
  const win: IonicWindow = window as any;
  const Ionic = (win.Ionic = win.Ionic || {});

  Ionic.config = config;

  applyPolyfills().then(() => defineCustomElements(win));

  addIcons({
    'ios-close': close.ios,
    'md-close': close.md,
    'ios-reorder': reorder.ios,
    'md-reorder': reorder.md,
    'ios-menu': menu.ios,
    'md-menu': menu.md,
    'ios-arrow-forward': arrowForward.ios,
    'md-arrow-forward': arrowForward.md,
    'ios-arrow-back': arrowBack.ios,
    'md-arrow-back': arrowBack.md,
    'ios-arrow-down': arrowDown.ios,
    'md-arrow-down': arrowDown.md,
    'ios-search': search.ios,
    'md-search': search.md,
    'ios-close-circle': closeCircle.ios,
    'md-close-circle': closeCircle.md,

const Ionic = (win.Ionic = win.Ionic || {});

  Ionic.config = config;

  applyPolyfills().then(() => defineCustomElements(win));

  addIcons({
    'ios-close': close.ios,
    'md-close': close.md,
    'ios-reorder': reorder.ios,
    'md-reorder': reorder.md,
    'ios-menu': menu.ios,
    'md-menu': menu.md,
    'ios-arrow-forward': arrowForward.ios,
    'md-arrow-forward': arrowForward.md,
    'ios-arrow-back': arrowBack.ios,
    'md-arrow-back': arrowBack.md,
    'ios-arrow-down': arrowDown.ios,
    'md-arrow-down': arrowDown.md,
    'ios-search': search.ios,
    'md-search': search.md,
    'ios-close-circle': closeCircle.ios,
    'md-close-circle': closeCircle.md,
  });
}

Ionic.config = config;

  applyPolyfills().then(() => defineCustomElements(win));

  addIcons({
    'ios-close': close.ios,
    'md-close': close.md,
    'ios-reorder': reorder.ios,
    'md-reorder': reorder.md,
    'ios-menu': menu.ios,
    'md-menu': menu.md,
    'ios-arrow-forward': arrowForward.ios,
    'md-arrow-forward': arrowForward.md,
    'ios-arrow-back': arrowBack.ios,
    'md-arrow-back': arrowBack.md,
    'ios-arrow-down': arrowDown.ios,
    'md-arrow-down': arrowDown.md,
    'ios-search': search.ios,
    'md-search': search.md,
    'ios-close-circle': closeCircle.ios,
    'md-close-circle': closeCircle.md,
  });
}

Ionic.config = config;

  applyPolyfills().then(() => defineCustomElements(win));

  addIcons({
    'ios-close': close.ios,
    'md-close': close.md,
    'ios-reorder': reorder.ios,
    'md-reorder': reorder.md,
    'ios-menu': menu.ios,
    'md-menu': menu.md,
    'ios-arrow-forward': arrowForward.ios,
    'md-arrow-forward': arrowForward.md,
    'ios-arrow-back': arrowBack.ios,
    'md-arrow-back': arrowBack.md,
    'ios-arrow-down': arrowDown.ios,
    'md-arrow-down': arrowDown.md,
    'ios-search': search.ios,
    'md-search': search.md,
    'ios-close-circle': closeCircle.ios,
    'md-close-circle': closeCircle.md,
  });
}

applyPolyfills().then(() => defineCustomElements(win));

  addIcons({
    'ios-close': close.ios,
    'md-close': close.md,
    'ios-reorder': reorder.ios,
    'md-reorder': reorder.md,
    'ios-menu': menu.ios,
    'md-menu': menu.md,
    'ios-arrow-forward': arrowForward.ios,
    'md-arrow-forward': arrowForward.md,
    'ios-arrow-back': arrowBack.ios,
    'md-arrow-back': arrowBack.md,
    'ios-arrow-down': arrowDown.ios,
    'md-arrow-down': arrowDown.md,
    'ios-search': search.ios,
    'md-search': search.md,
    'ios-close-circle': closeCircle.ios,
    'md-close-circle': closeCircle.md,
  });
}

export function appInitialize(config?: IonicConfig) {
  const win: IonicWindow = window as any;
  const Ionic = (win.Ionic = win.Ionic || {});

  Ionic.config = config;

  applyPolyfills().then(() => defineCustomElements(win));

  addIcons({
    'ios-close': close.ios,
    'md-close': close.md,
    'ios-reorder': reorder.ios,
    'md-reorder': reorder.md,
    'ios-menu': menu.ios,
    'md-menu': menu.md,
    'ios-arrow-forward': arrowForward.ios,
    'md-arrow-forward': arrowForward.md,
    'ios-arrow-back': arrowBack.ios,
    'md-arrow-back': arrowBack.md,
    'ios-arrow-down': arrowDown.ios,
    'md-arrow-down': arrowDown.md,
    'ios-search': search.ios,
    'md-search': search.md,
    'ios-close-circle': closeCircle.ios,
    'md-close-circle': closeCircle.md,
  });
}

const win: IonicWindow = window as any;
  const Ionic = (win.Ionic = win.Ionic || {});

  Ionic.config = config;

  applyPolyfills().then(() => defineCustomElements(win));

  addIcons({
    'ios-close': close.ios,
    'md-close': close.md,
    'ios-reorder': reorder.ios,
    'md-reorder': reorder.md,
    'ios-menu': menu.ios,
    'md-menu': menu.md,
    'ios-arrow-forward': arrowForward.ios,
    'md-arrow-forward': arrowForward.md,
    'ios-arrow-back': arrowBack.ios,
    'md-arrow-back': arrowBack.md,
    'ios-arrow-down': arrowDown.ios,
    'md-arrow-down': arrowDown.md,
    'ios-search': search.ios,
    'md-search': search.md,
    'ios-close-circle': closeCircle.ios,
    'md-close-circle': closeCircle.md,
  });
}

export function appInitialize(config?: IonicConfig) {
  const win: IonicWindow = window as any;
  const Ionic = (win.Ionic = win.Ionic || {});

  Ionic.config = config;

  applyPolyfills().then(() => defineCustomElements(win));

  addIcons({
    'ios-close': close.ios,
    'md-close': close.md,
    'ios-reorder': reorder.ios,
    'md-reorder': reorder.md,
    'ios-menu': menu.ios,
    'md-menu': menu.md,
    'ios-arrow-forward': arrowForward.ios,
    'md-arrow-forward': arrowForward.md,
    'ios-arrow-back': arrowBack.ios,
    'md-arrow-back': arrowBack.md,
    'ios-arrow-down': arrowDown.ios,
    'md-arrow-down': arrowDown.md,
    'ios-search': search.ios,
    'md-search': search.md,
    'ios-close-circle': closeCircle.ios,
    'md-close-circle': closeCircle.md,
  });