dimensions

title: Changing Icon Dimensions in Iconify for Ember

Icon dimensions

This tutorial is part of Iconify for Ember tutorial.

include: icon-components/components/size-intro

src: icon-components/ember/size.hbs
css: components/size.scss
demo: icon-components/common/size.html
class: components-size

If you want to control icon size with [prop]width and [prop]height in CSS, see how to remove icon dimensions section below.

Units

include: icon-components/components/size-units

<IconifyIcon @icon='mdi:home' @height={{24}} />
<IconifyIcon @icon='mdi:home' @height='24' />
<IconifyIcon @icon='mdi:home' @height='24px' />
<IconifyIcon @icon='mdi:home' @height='1.5em' style='font-size: 16px;' />

Keyword "auto" {#auto}

include: icon-components/components/size-auto

<IconifyIcon @icon="mdi: home;" height="auto" />

Keywords "none" and "unset" {#unset}

include: icon-components/components/size-unset

src: icon-components/ember/size-unset.hbs
demo: icon-components/common/size-unset.html
class: 'icon-size icon-size--unset'

include: icon-components/components/size-unset-footer

Setting only width or height

In an example above, all icons only use [prop]height.

include icon-components/size-one

Example

include icon-components/size-example

Alignment

include icon-components/align-header

src: icon-components/ember/alignment.hbs
demo: icon-components/common/alignment.html
demoHint: Using box-shadow to show icon dimensions
class: highlight-box

include icon-components/align-behavior