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:

SupportTagDocumentation
IconifyNone requiredBrowse Iconify libraries
Font Awesomefa:Learn more about Font Awesome
Material Design IconNone requiredExplore MDI
Custom Fontfont:Import custom font icons into your CSS
SVGsvg: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:

PropertyTypeDefaultDescription
tagstringiSpecifies the icon to display (with prefix for type)
darkbooleanfalseForce color theme on dark.
lightbooleanfalseForce color theme on light.
disabledbooleanfalseDisabled icon and style disabled.
startbooleanfalseAdd margin-inline-end on your icon
endbooleanfalseAdd margin-inline-start on your icon
iconstring-Add path, IconElement or class for display icon
sizestring‘default’Adjusts the icon size xs, sm, md, lg, xl,
colorstringundefinedDefines 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?

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

Minedelve respects your privacy

Minedelve and our partners use cookies or similar technologies to enable us to improve the site, your experience and to ensure the proper functioning of the site, to collect statistics in order to optimize the services offered, and to adapt Minedelve's content.