Skip to main content

Using Material Icons in Documentation

The documentation site uses Material Icons to match the exact icons used in the tenant UI. This ensures consistency and helps users recognize features.

Available Icons​

All icons must match exactly what's used in the tenant UI. The authoritative icon list is documented in docs/icon-field-mapping.md.

Field / Filter Icons​

  • view_in_ar - Container
  • dns - Terminal
  • event - Case date
  • format_list_numbered - Results count
  • sell - Tags
  • note - Notes
  • directions_car - License plate
  • edit_note - Remark
  • image - Image type / OCR
  • source - Source
  • person - Creator
  • tag - ID / Pic ID
  • search - Search (generic)
  • email - Email / Address
  • send or forward - Destination
  • place - GPS / Location

Case Card Icons​

  • check - Checkbox checked
  • add - Add tag
  • close - Remove (tag chip) / Clear selection
  • directions_car - License plate
  • comment - Comment
  • hourglass_bottom - Post status
  • visibility - Unhide
  • sync - Unhiding/Downloading in progress (animated)
  • link - Share links / Share case
  • expand_more - Case menu
  • upload - Upload pictures
  • folder_zip - Download ZIP
  • drive_file_move - Move case / Move selected
  • content_copy - Copy case / Copy selected
  • delete_outline - Delete case / Delete selected
  • send - Send button
  • visibility_off - Hide selected

Send Feature Icons​

  • dns - Terminal
  • view_in_ar - Container
  • event - Case date
  • check_circle - Success
  • schedule - Scheduled
  • send - Send button
  • close - Close button
  • info - Info alert
  • confirmation_number - AEMS order
  • swap_horiz - Swap destinations

Using Icons in Markdown​

Method 1: HTML with Material Icons Class​

<span class="material-icons md-18" style="color: var(--ifm-color-primary);">send</span>

Method 2: Inline with Text​

<span class="icon-inline">
  <span class="material-icons md-16">send</span>
  Send button
</span>

Method 3: Using MaterialIcon Component (in MDX files)​

import MaterialIcon from '@site/src/components/MaterialIcon';

<MaterialIcon name="send" size={18} color="primary" />

Icon Sizes​

Control icon size with font-size CSS property. Common sizes used in the tenant UI:

  • 14px - Table/filter icons, inline indicators
  • 16px - Small buttons, inline actions
  • 18px - Buttons, action buttons
  • 20px - Medium buttons
  • 22px - Large info icons
  • 24px - Default size

You can use the CSS classes md-14, md-16, md-18, etc., or set font-size directly via inline styles.

Icon Colors​

Available colors:

  • default - Default text color
  • primary - Primary blue (#2563eb)
  • muted - Muted gray (#94a3b8)
  • success - Success green (#16a34a)
  • error - Error red (#dc2626)
  • warning - Warning orange (#ea580c)

Examples​

Button with Icon​

<button>
  <span class="material-icons md-18">send</span>
  Send Pictures
</button>

Inline Icon with Text​

Click the <span class="material-icons md-16" style="vertical-align: middle;">send</span> button to send pictures.

Status Icon​

<span class="material-icons md-20" style="color: var(--app-status-success);">check_circle</span>
Send successful

Best Practices​

  1. Match Tenant UI: Always use the exact same icon name as used in the tenant UI
  2. Consistent Sizing: Use appropriate sizes (14-18px for inline, 18-24px for buttons)
  3. Color Coding: Use color to indicate status or importance
  4. Accessibility: Icons should have aria-hidden="true" when decorative
  5. Context: Always provide text labels alongside icons for clarity

Icon Reference Pages​

Authoritative Source​

The complete icon-to-field mapping is documented in docs/icon-field-mapping.md in the main repository. All icons used in documentation must match the icons listed there to ensure consistency with the tenant UI.