dimensions

title: Changing Icon Dimensions in Iconify for Svelte

Icon dimensions

This tutorial is part of Iconify for Svelte tutorial.

include: icon-components/components/size-intro

src: icon-components/common/size.svelte
demo: true
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

<JSXWrapper>
// Number
<Icon icon="mdi:home" height={24} />
// String without units
<Icon icon="mdi:home" height="24" />
// String with units
<Icon icon="mdi:home" height="24px" />
// String with units, font-size is 16px
<Icon icon="mdi:home" height="1.5em" />
</JSXWrapper>

Keyword "auto" {#auto}

include: icon-components/components/size-auto

<Icon icon="mdi:home" height="auto" />

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

include: icon-components/components/size-unset

src: icon-components/common/size-unset.svelte
demo: true
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/common/alignment.jsx
demo: true
demoHint: Using box-shadow to show icon dimensions
class: highlight-box

include icon-components/align-behavior