iconify/packages/ember-demo/app/components/alignment-demo.hbs

<section class='alignment-demo'>
  <h1>Alignment (components/alignment-demo.hbs)</h1>
  <div>
    <p>Icon with correct width/heigh ratio:</p>
    <IconifyIcon @icon='dashicons:paperclip' />
  </div>
  <div>
    <p>Bad width/height ratio, default alignment (slice = false):</p>
    <IconifyIcon @icon='dashicons:paperclip' @width='2em' @height='1em' />
    <IconifyIcon @icon='dashicons:paperclip' @width='1em' @height='2em' />
  </div>
  <div>
    <p>Slice:</p>
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @slice={{true}}
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @align='slice'
    />
  </div>
  <div>
    <p>Slice:</p>
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @slice={{true}}
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @align='slice'
    />
  </div>
  <div>
    <p>Left:</p>
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @hAlign='left'
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @align='left'
    />
  </div>
  <div>
    <p>Left with slice:</p>
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @hAlign='left'
      @slice={{true}}
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @align='left'
      @slice={{true}}
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @align='left,slice'
    />
  </div>
  <div>
    <p>Right:</p>
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @hAlign='right'
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @align='right'
    />
  </div>
  <div>
    <p>Right with slice:</p>
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @hAlign='right'
      @slice={{true}}
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @align='right'
      @slice={{true}}
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @align='right,slice'
    />
  </div>
  <div>
    <p>Top:</p>
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @vAlign='top'
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @align='top'
    />
  </div>
  <div>
    <p>Top with slice:</p>
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @vAlign='top'
      @slice={{true}}
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @align='top'
      @slice={{true}}
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @align='top,slice'
    />
  </div>
  <div>
    <p>Bottom:</p>
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @vAlign='bottom'
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='1em'
      @height='2em'
      @align='bottom'
    />
  </div>
  <div>
    <p>Bottom with slice:</p>
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @vAlign='bottom'
      @slice={{true}}
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @align='bottom'
      @slice={{true}}
    />
    <IconifyIcon
      @icon='dashicons:paperclip'
      @width='2em'
      @height='1em'
      @align='bottom,slice'
    />
  </div>
</section>