The <mi-icon> element can be used to display an icon. The icon scales to fit the host elements size which means a width and height should be defined for the element. Please note that this component is not compatible with Internet Explorer.

Working example:

Example usage:

<!-- HTML -->

<mi-icon class="icon" icon-name="bike"></mi-icon>
/* CSS */

.icon {
    width: 100px;
    height: 100px;
    background-color: blue;

icon-name attribute

A icon-name attribute is available on the <mi-icon> element, which should be used to specify the icon. The attribute is required.

Supported icons:

Icon Name Description Preview
toggle A toggle icon
printer A printer icon
circle A empty circle icon
marker A marker icon
walk A walking icon
bike A bicycling icon
boat A boat icon
bus A bus icon
railway A railway icon
train A train icon
subway A subway icon
transit A transit icon
car A driving icon
transit-stop A transit stop icon
park A parking icon
elevator A elevator icon
stairs A stairs icon
ladder A ladder icon
wheelchair-ramp A wheelchair ramp icon
wheeldhair-lift A wheelchair lift icon
depart A navigation icon
arrow-straight A navigation icon
arrow-sharp-right A navigation icon
arrow-sharp-left A navigation icon
arrow-slight-right A navigation icon
arrow-slight-left A navigation icon
arrow-right A navigation icon
arrow-left A navigation icon
arrow-u-turn A navigation icon


Property Attribute Description Type Default
iconName icon-name The icon name. A list of supported icons can be found in the documentation. string undefined