Icon Element

Decorating your content.

Overview

Mame includes around 100 optimized icons for different usages. Icons may serve as lightweight alternative to images.

P.S.: You can insert icons  into formatted text directly, without using the element using the Icon element.

Usage Examples

  • Decorating text.
  • Getting attention.
  • Lightweight alternative to images.

Icon Properties

  1. Icon: Choose an icon from the list.
  2. Size: Set the size of the icon. 
  3. Color: Color of the icon, choose between your site's colors (default is primary) or choose a custom color.
  4. Link Type: Add an optional link to the icon.
Everything else is configured in the common general properties.
Icon Properties Description

See it in action (Three icons on a Grid)

Interactions and Accessibility

Your Icons should have a title for accessibility. 

Generated HTML


<div class="mame-element mame-icon">
   <div class="icon icon-paperplane primary" title="Icon Title" aria..></div>
</details>

Style / CSS Selectors


.mame-icon {
  /* All icon elements */
}

.mame-icon .icon {
  /* The actual icons */
} 

JavaScript

Icons are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

Was this article helpful?