Default Gray Amethyst

Icon

<mo-icon> | MOIcon
Since 1.0 stable

The icon component allows for easy display of icon .svg files included in Modes.

You can find the full list of icons from the assets / icons page.

Examples

Syntax: 

<mo-icon name="icon-name-here"></mo-icon>

Sizing

Icons are sized relative to the current font size, they default to 16px. To change their size, set the font-size property on the icon itself or on a parent element as shown below. 

<div style="font-size: 40px;">
  <mo-icon name="alarm"></mo-icon>
  <mo-icon name="checkbox-check"></mo-icon>
  <mo-icon name="exclamation-mark-circle"></mo-icon>
  <mo-icon name="clock"></mo-icon>
  <mo-icon name="download"></mo-icon>
  <mo-icon name="document"></mo-icon>
  <mo-icon name="search"></mo-icon>
  <mo-icon name="star"></mo-icon>
  <mo-icon name="trash"></mo-icon>
</div>

import { MOIcon } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <div style={{ fontSize: '40px' }}>
    <MOIcon name="alarm" />
    <MOIcon name="checkbox-check" />
    <MOIcon name="exclamation-mark-circle" />
    <MOIcon name="clock" />
    <MOIcon name="download" />
    <MOIcon name="document" />
    <MOIcon name="search" />
    <MOIcon name="star" />
    <MOIcon name="trash" />
  </div>
);

Coloring

Icons will inherit their parent’s color, and they default to mo-color-primary-7 (#121212). Color can also be changed by setting the color property directly in the icon styling. 

<div style="font-size: 32px;">
  <mo-icon style="color: var(--mo-color-status-warning)" name="alarm"></mo-icon>
  <mo-icon style="color: var(--mo-color-status-alert)" name="exclamation-mark-circle"></mo-icon>
  <mo-icon style="color: var(--mo-color-link-text)" name="download"></mo-icon>
  <mo-icon style="color: var(--mo-color-highlight-1-lighter)" name="star"></mo-icon>
</div>

import { MOIcon } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <div style={{ fontSize: '32px' }}>
    <MOIcon style={{ color: 'var(--mo-color-status-warning' }} name="alarm" />
    <MOIcon style={{ color: 'var(--mo-color-status-alert' }} name="exclamation-mark-circle" />
    <MOIcon style={{ color: 'var(--mo-color-link-text' }} name="download" />
    <MOIcon style={{ color: 'var(--mo-color-highlight-1-lighter' }} name="star" />
  </div>
);

Labels

For non-decorative icons, use the label attribute to announce it to assistive devices.

<mo-icon name="star" label="Add to favorites"></mo-icon>

import { MOIcon } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOIcon name="star" label="Add to favorites" />;

Custom icons

Custom icons can be loaded individually with the src attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you’re using more than one custom icon, it might make sense to register a custom icon library. 

<mo-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></mo-icon>

import { MOIcon } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></MOIcon>;

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/icon/icon.js';

To import this component as a React component:

import MOIcon from '@metsooutotec/modes-web-components/dist/react/icon/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/icon/icon.js"></script>

Properties

Name Description Reflects Type Default
name The name of the icon to draw. string | undefined -
src An external URL of an SVG file. WARNING: Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks. string | undefined -
label An alternate description to use for accessibility. If omitted, the icon will be ignored by assistive devices. string ''
library The name of a registered custom icon library. string 'default'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
mo-load onMoLoad Emitted when the icon has loaded. -
mo-error onMoError Emitted when the icon fails to load due to an error. { status: number }

Learn more about events.

Parts

Name Description
base The component’s internal wrapper.

Learn more about customizing CSS parts.