Icon

The Icon component represents common actions and supports both Material Icons and SVG icons.

Usage

Import the component:

import 'mdui/components/icon.js';

Import the TypeScript type:

import type { Icon } from 'mdui/components/icon.js';

Example:

Using Material Icons

To use Material Icons, import the CSS file for the desired variant: Filled, Outlined, Rounded, Sharp, or Two Tone.

<!-- Filled -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Outlined -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

<!-- Rounded -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">

<!-- Sharp -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">

<!-- Two Tone -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">

Use the name attribute to specify the icon, appending the variant name as a suffix (no suffix needed for Filled). Here's how to use the delete icon in all 5 variants:

Search for icons directly using the Material Icons Search tool at the page bottom. Click an icon to copy its code to the clipboard.

mdui also provides a standalone package @mdui/icons, with each icon component as a separate file. This allows importing only needed icon components, without the entire icon library.

Using SVG Icon

The component supports SVG icons. Pass the SVG icon link to the src attribute:

Or, pass the SVG content directly into the component's default slot:

Examples

Set Color

Change the icon color by setting the color CSS style of the <mdui-icon> element or its parent.

Set Size

Change the icon size by setting the font-size CSS style of the <mdui-icon> element or its parent.