Icon Component with Mytril: Versatile and Flexible

Mytril’s Icon component makes it simple to integrate icons from various sources. The component seamlessly handles icons from Font Awesome, Iconify, Material Design Icons, custom fonts, and SVGs, providing both compatibility and ease of use.

Using Icons in your application

Adding icons is straightforward with Mytril’s Icon component:

<script>
	import { Icon } from 'mytril';
</script>

<Icon icon="mdi:home" />

Supported Icon libraries

Mytril supports a range of popular icon libraries and custom sources:

Support	Tag	Documentation
Iconify	None required	Browse Iconify libraries
Font Awesome	`fa:`	Learn more about Font Awesome
Material Design Icon	None required	Explore MDI
Custom Font	`font:`	Import custom font icons into your CSS
SVG	`svg:`	Use custom SVG files for icons

Icon library integration examples

1. Iconify

No additional setup is required if your project includes the @iconify/svelte package. Install it by following the Iconify Svelte Documentation.

<script>
	import { Icon } from 'mytril';
</script>

<Icon icon="material-symbols:10k-rounded" />

2. Font Awesome

Install the necessary Font Awesome dependencies to start using its icons. Use the fa: prefix to specify icons.

<script>
	import { Icon } from 'mytril';
</script>

<Icon icon="fa:fa-solid fa-house" />

3. Material Design Icons (MDI)

For MDI, install the @mdi/js package. Mytril’s Icon component handles these icons effortlessly.

<script>
	import { Icon } from 'mytril';
	import { mdiAccount } from '@mdi/js';
</script>

<Icon icon={mdiAccount} />

4. Custom Fonts

Add your custom fonts to your project’s CSS and reference them using the font: prefix.

<script>
	import { Icon } from 'mytril';
</script>

<Icon icon="font:demo-pacman" />

5. SVG

Add your svg file icons and import directly into Mytril’s Icon component with the svg: prefix

<script>
	import { Icon } from 'mytril';
	import iconSVG from '$lib/icons/3d-rotation.svg';
</script>

<Icon icon={`svg:${iconSVG}`} />

Icon component properties

The Icon component comes with several customizable properties, ensuring flexibility for developers:

Property	Type	Default	Description
tag	string	i	Specifies the icon to display (with prefix for type)
dark	boolean	false	Force color theme on dark.
light	boolean	false	Force color theme on light.
disabled	boolean	false	Disabled icon and style disabled.
start	boolean	false	Add `margin-inline-end` on your icon
end	boolean	false	Add `margin-inline-start` on your icon
icon	string	-	Add path, IconElement or class for display icon
size	string	‘default’	Adjusts the icon size `xs`, `sm`, `md`, `lg`, `xl`,
color	string	undefined	Defines the icon color (accepts HEX, RGB, or theme variables)

Customizing Icon appearance

<script>
	import { Icon } from 'mytril';
</script>

<Icon icon="mdi:home" size="lg" color="primary" class="custom-icon" />

Why choose Mytril’s Icon component?

Extensive compatibility: supports multiple icon libraries and formats, from standard libraries to custom fonts and SVGs
Ease of use: simple, intuitive syntax that requires minimal setup
Customization: flexible properties for adjusting size, color, and style to match your design
Performance optimized: built with Svelte’s framework for lightweight, reactive performance
Accessibility: built-in ARIA roles ensure proper screen reader support