Icons Customization in Mimeeq

Introduction

Mimeeq's embed configurator UI offers extensive customization capabilities, allowing you to tailor the interface to match your brand identity. One of the most powerful customization options is the ability to replace any icon used throughout the application with your own custom SVG icons or icon components.

While Mimeeq organizes icons into technical categories in its configuration system (basket, configurator, form, etc.), understanding how these icons are used in real-world contexts is more important for creating a cohesive user experience. This guide organizes icons by their functional usage to help you identify which icons to customize for specific areas of the UI.

Setting Up Icon Customization

Initial Configuration

You can set the initial values by configuring the window.mimeeqAppConfig object before loading the Mimeeq embed:

window.mimeeqAppConfig = {
  icons: {
    misc: {
      close: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M481-442 272-232q-9 9-19.5 9T232-233q-9-10-8.5-19t9.5-19l208-209-209-211q-8-9-8.5-18.5T232-729q10-10 20-10.5t20 9.5l209 210 207-210q9-9 19.5-9t20.5 10q9 10 8.5 19t-9.5 19L519-480l208 209q8 8 9 18t-8 20q-10 10-20 10.5t-20-9.5L481-442Z"/></svg>',
    },
  },
};

Runtime Configuration Changes

You can adjust the icon configuration after the Mimeeq embed has loaded:

document.addEventListener('mimeeq-app-loaded', () => {
  window.mimeeqApp.config.icons = {
    misc: {
      close: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M481-442 272-232q-9 9-19.5 9T232-233q-9-10-8.5-19t9.5-19l208-209-209-211q-8-9-8.5-18.5T232-729q10-10 20-10.5t20 9.5l209 210 207-210q9-9 19.5-9t20.5 10q9 10 8.5 19t-9.5 19L519-480l208 209q8 8 9 18t-8 20q-10 10-20 10.5t-20-9.5L481-442Z"/></svg>',
    },
  };
});

Icons by Application Component

To make customization more intuitive, let's explore icons based on the actual application components and areas where they appear. This approach will help you identify which icons to customize for specific parts of the Mimeeq interface.

The side panel is a central component of the product configurator interface, containing options, controls, and summary information.

Icon Name	Technical Path	Component	Description
close	`misc.close`	mmq-side-panel-header	Close panel button
arrowLeftShort	`misc.arrowLeftShort`	mmq-side-panel-header	Back navigation in panel
expand	`optionPanel.expand`	mmq-side-panel-header	Expand panel button
collapse	`optionPanel.collapse`	mmq-side-panel-header	Collapse panel button
plus	`optionPanel.plus`	mmq-new-quantity-box	Increase quantity button
minus	`optionPanel.minus`	mmq-new-quantity-box	Decrease quantity button
caretDown	`misc.caretDown`	mmq-item-button	Expand/collapse options in menu
search	`form.search`	mmq-save-config-form	Search collections field
heart	`quickIcons.heart`	mmq-save-button	Save to favorites button
pdfSquare	`quickIcons.pdfSquare`	mmq-side-panel-footer	Generate PDF button
share	`quickIcons.share`	mmq-side-panel-footer, mmq-share-component	Share product button

Example Customization:

window.mimeeqApp.config.icons = {
  misc: {
    close: '<svg><!-- Your custom close icon --></svg>',
    arrowLeftShort: '<svg><!-- Your custom back arrow --></svg>'
  },
  optionPanel: {
    plus: '<svg><!-- Your custom plus icon --></svg>',
    minus: '<svg><!-- Your custom minus icon --></svg>'
  }
};

The Quick Icons toolbar provides easy access to frequently used tools and actions in the configurator.

Icon Name	Technical Path	Component	Description
zoomAll	`quickIcons.zoomAll`	mmq-zoom-all	Fit all content to view
enterFullscreen	`quickIcons.enterFullscreen`	mmq-full-screen-button	Enter fullscreen mode
leaveFullscreen	`quickIcons.leaveFullscreen`	mmq-full-screen-button	Exit fullscreen mode
reset	`quickIcons.reset`	mmq-quick-icons	Reset configuration button
undo	`quickIcons.undo`	mmq-quick-icons	Undo last action
redo	`quickIcons.redo`	mmq-quick-icons	Redo last action
imageSquare	`quickIcons.imageSquare`	mmq-quick-icons	Export image button
pdfSquare	`quickIcons.pdfSquare`	mmq-quick-icons	Generate PDF button
exportModel	`quickIcons.exportModel`	mmq-quick-icons	Export 3D model button
ar	`quickIcons.ar`	mmq-quick-icons	Augmented reality button
save	`quickIcons.save`	mmq-save-scene-button	Save configuration or scene
dimensions	`quickIcons.dimensions`	mmq-quick-icons	Show/hide dimensions
gridOn	`quickIcons.gridOn`	mmq-quick-icons	Enable grid on scene
gridOff	`quickIcons.gridOff`	mmq-quick-icons	Disable grid on scene
threeDots	`quickIcons.threeDots`	mmq-dot-menu	Mobile menu button
priceSettings	`quickIcons.priceSettings`	mmq-price-settings-button	Price settings button

Example Customization:

window.mimeeqApp.config.icons = {
  quickIcons: {
    zoomAll: '<svg><!-- Your custom zoom-all icon --></svg>',
    reset: '<svg><!-- Your custom reset icon --></svg>',
    undo: '<svg><!-- Your custom undo icon --></svg>',
    redo: '<svg><!-- Your custom redo icon --></svg>'
  }
};

3. Image Panel & Media Controls

These icons appear in image galleries, media previews, and view controls.

Icon Name	Technical Path	Component	Description
3d	`configurator.3d`	mmq-image-panel-footer	3D view thumbnail indicator
arrowDropDown	`configurator.arrowDropDown`	mmq-image-panel-footer	Gallery navigation arrow
ar	`quickIcons.ar`	mmq-image-panel-footer, mmq-quote-preview-ui	AR view button
imageSquare	`quickIcons.imageSquare`	mmq-quote-preview-ui	Save image button
plus	`misc.plus`	mmq-zoom-buttons	Zoom in button
minus	`optionPanel.minus`	mmq-zoom-buttons	Zoom out button
download	`misc.download`	mmq-img-download-button	Download image button
enterFullscreenHotspot	`configurator.enterFullscreenHotspot`	mmq-hotspot-modal	Enter fullscreen in hotspot
leaveFullscreenHotspot	`configurator.leaveFullscreenHotspot`	mmq-hotspot-modal	Exit fullscreen in hotspot

Example Customization:

window.mimeeqApp.config.icons = {
  configurator: {
    '3d': '<svg><!-- Your custom 3D view icon --></svg>',
    arrowDropDown: '<svg><!-- Your custom dropdown arrow --></svg>'
  },
  misc: {
    download: '<i class="fa fa-download"></i>'
  }
};

4. AR Experience

Icons used in Augmented Reality features and components.

Icon Name	Technical Path	Component	Description
ar	`quickIcons.ar`	mmq-mobile-header, mmq-image-panel-footer	AR mode button
arIncompatible	`configurator.arIncompatible`	mmq-ar-incompatible	Device incompatibility indicator
arFailed	`configurator.arFailed`	mmq-ar-modal	AR generation failure
close	`misc.close`	mmq-ar-modal	Close AR dialog
clone	`modular.clone`	mmq-ar-modal	Copy URL button

Example Customization:

window.mimeeqApp.config.icons = {
  quickIcons: {
    ar: '<svg><!-- Your custom AR icon --></svg>'
  },
  configurator: {
    arIncompatible: '<svg><!-- Your custom incompatibility icon --></svg>'
  }
};

5. Modular Product Editor

Icons used in the modular product interface for manipulating multiple objects in a scene.

Icon Name	Technical Path	Component	Description
clone	`modular.clone`	mmq-modular-toolbar	Duplicate selected element
move	`modular.move`	mmq-modular-toolbar	Move selected element
replace	`modular.replace`	mmq-modular-toolbar	Replace selected element
configure	`modular.configure`	mmq-modular-toolbar	Configure selected element
copyStyle	`modular.copyStyle`	mmq-modular-toolbar	Copy style from element
drag	`modular.drag`	mmq-modular-toolbar-positioner	Handle for dragging toolbar
flip	`modular.flip`	mmq-modular-toolbar	Flip selected element
chevronRight	`modular.chevronRight`	mmq-modular-toolbar	Navigation indicator
noItems	`modular.noItems`	mmq-element-list-modal, mmq-tab-elements	Empty state indicator
threeLines	`modular.threeLines`	mmq-element-list-modal	Category filters
sortAz	`modular.sortAz`	mmq-element-list-modal	Sort alphabetically
plus	`misc.plus`	mmq-modular-element-list, mmq-tab-elements	Add new element button
collision	`modular.collision`	mmq-collision-modal	Collision warning icon
productReplacement	`modular.productReplacement`	mmq-product-replacement-modal	Replacement warning icon
sceneError	`modular.sceneError`	mmq-scene-error-modal	Scene error indicator
noOptions	`modular.noOptions`	mmq-tab-configurator-content	No options available indicator
noCustomizableOptions	`modular.noCustomizableOptions`	mmq-tab-configurator-content	No customization available indicator

Example Customization:

window.mimeeqApp.config.icons = {
  modular: {
    clone: '<svg><!-- Your custom clone icon --></svg>',
    move: '<svg><!-- Your custom move icon --></svg>',
    flip: '<svg><!-- Your custom flip icon --></svg>',
    noItems: '<svg><!-- Your custom empty state icon --></svg>'
  }
};

6. Basket & Shopping Cart

Icons used in the shopping cart, checkout process, and order management.

Icon Name	Technical Path	Component	Description
cart	`basket.cart`	mmq-basket-button	Shopping cart button
emptyCart	`basket.emptyCart`	mmq-empty-basket	Empty cart state icon
envelope	`basket.envelope`	mmq-order-sent	Order submission confirmation
trash	`misc.trash`	mmq-cart-item	Remove item button
caretDown	`misc.caretDown`	mmq-cart-item	Specification dropdown
arrowLeft	`misc.arrowLeft`	mmq-basket-panel	Back button in contact form
close	`misc.close`	mmq-basket-panel	Close panel button
check	`misc.check`	mmq-basket-contact-details	Checkbox states

Example Customization:

window.mimeeqApp.config.icons = {
  basket: {
    cart: '<svg><!-- Your custom cart icon --></svg>',
    emptyCart: '<svg><!-- Your custom empty cart icon --></svg>'
  },
  misc: {
    trash: '<i class="fa fa-trash"></i>'
  }
};

7. Form & Input Controls

Icons used in form inputs, search fields, selects, and other interactive controls.

Icon Name	Technical Path	Component	Description
checkedCheckbox	`form.checkedCheckbox`	mmq-checkbox	Selected checkbox state
uncheckedCheckbox	`form.uncheckedCheckbox`	mmq-checkbox	Unselected checkbox state
indeterminateCheckbox	`form.indeterminateCheckbox`	mmq-checkbox	Partial checkbox state
checkedRadio	`form.checkedRadio`	mmq-radio	Selected radio button state
emptyRadio	`form.emptyRadio`	mmq-radio	Unselected radio button state
search	`form.search`	mmq-mobile-search, mmq-element-list-modal	Search icon
increase	`form.increase`	mmq-number-input	Increment value button
decrease	`form.decrease`	mmq-number-input	Decrement value button
errorInfo	`form.errorInfo`	mmq-text-field, mmq-select	Error indicator
close	`misc.close`	mmq-mobile-search, mmq-collection-item	Clear search or remove item
caretDown	`misc.caretDown`	mmq-base-select	Dropdown indicator
pencil	`misc.pencil`	mmq-filter-button	Edit filter button

Example Customization:

window.mimeeqApp.config.icons = {
  form: {
    checkedCheckbox: '<svg><!-- Your custom checkbox icon --></svg>',
    uncheckedCheckbox: '<svg><!-- Your custom empty checkbox icon --></svg>',
    search: '<i class="fa fa-search"></i>'
  }
};

8. Image Manipulation & Widgets

Icons used in image upload, texture editing, and Print-On-Demand (POD) functionality.

Icon Name	Technical Path	Component	Description
flipHorizontally	`widgets.flipHorizontally`	mmq-image-configurator	Flip image horizontally
flipVertically	`widgets.flipVertically`	mmq-image-configurator	Flip image vertically
reset	`widgets.reset`	mmq-image-configurator	Reset image settings
trash	`misc.trash`	mmq-image-configurator	Remove image
lock	`misc.lock`	mmq-texture-widget	Locked widget indicator
plus	`misc.plus`	mmq-texture-widget	Add new image
replaceCircle	`widgets.replaceCircle`	mmq-texture-widget, mmq-drag-tooltip	Replace image button
closeFilled	`widgets.closeFilled`	mmq-logo-library	Remove image button
eye	`widgets.eye`	mmq-print-on-demand-layers	Show layer button
eyeCross	`widgets.eyeCross`	mmq-print-on-demand-layers	Hide layer button
mousePointer	`configurator.mousePointer`	mmq-see-changes-overlay	Click-to-apply changes indicator
imageSquare	`quickIcons.imageSquare`	mmq-print-on-demand-preview-canvas	No layers state

Example Customization:

window.mimeeqApp.config.icons = {
  widgets: {
    flipHorizontally: '<svg><!-- Your custom flip icon --></svg>',
    flipVertically: '<svg><!-- Your custom flip icon --></svg>',
    eye: '<i class="fa fa-eye"></i>',
    eyeCross: '<i class="fa fa-eye-slash"></i>'
  }
};

9. Export & Document Operations

Icons used for saving, exporting, and file operations.

Icon Name	Technical Path	Component	Description
pdfSquare	`quickIcons.pdfSquare`	mmq-save-pdf-button, mmq-quick-icons	Generate PDF button
save	`quickIcons.save`	mmq-save-favs-modal-button, mmq-save-scene-button	Save configuration
fileGlb	`configurator.fileGlb`	mmq-export-model-modal	GLB file format option
fileObj	`configurator.fileObj`	mmq-export-model-modal	OBJ file format option
fileStl	`configurator.fileStl`	mmq-export-model-modal	STL file format option
fileJpeg	`configurator.fileJpeg`	mmq-export-image-modal	JPEG format option
filePng	`configurator.filePng`	mmq-export-image-modal	PNG format option
pdfLoader	`misc.pdfLoader`	mmq-pdf-loader	PDF generation animation
document	`misc.document`	mmq-document	Document file icon
download	`misc.download`	mmq-img-download-button	Download file button

Example Customization:

window.mimeeqApp.config.icons = {
  quickIcons: {
    pdfSquare: '<svg><!-- Your custom PDF icon --></svg>',
    save: '<svg><!-- Your custom save icon --></svg>'
  },
  configurator: {
    fileGlb: '<svg><!-- Your custom GLB icon --></svg>',
    filePng: '<svg><!-- Your custom PNG icon --></svg>'
  }
};

10. Notifications & Messaging

Icons used in notifications, alerts, tooltips, and message components.

Icon Name	Technical Path	Component	Description
info	`messageWidget.info`	mmq-message-widget, mmq-side-panel-content	Information message
warning	`messageWidget.warning`	mmq-message-widget, mmq-inline-notification	Warning message
general	`messageWidget.general`	mmq-message-widget	General message
idea	`messageWidget.idea`	mmq-message-widget	Suggestion message
tips	`messageWidget.tips`	mmq-message-widget	Tips/hints message
errorInfo	`form.errorInfo`	mmq-warning-3d, mmq-logo-library	Error indicator
limitHit	`misc.limitHit`	mmq-error-modal	Limit reached warning
sceneError	`modular.sceneError`	mmq-error-modal	Scene error warning
checkCircle	`misc.checkCircle`	mmq-inline-notification	Success message

Example Customization:

window.mimeeqApp.config.icons = {
  messageWidget: {
    info: '<svg><!-- Your custom info icon --></svg>',
    warning: '<svg><!-- Your custom warning icon --></svg>'
  },
  form: {
    errorInfo: '<i class="fa fa-exclamation-circle"></i>'
  }
};

Icons used for sharing and social media functionality.

Icon Name	Technical Path	Component	Description
share	`quickIcons.share`	mmq-side-panel-footer, mmq-share-component	Share button
link	`share.link`	mmq-share-modal, mmq-share-component	Copy link icon
mail	`share.mail`	mmq-share-modal, mmq-share-component	Email sharing icon

Example Customization:

window.mimeeqApp.config.icons = {
  share: {
    link: '<svg><!-- Your custom link icon --></svg>',
    mail: '<i class="fa fa-envelope"></i>'
  }
};

Important Note on Icons with the Same Name

It's important to understand that when the same icon name appears in different technical paths (like misc.plus vs optionPanel.plus), they are typically visually different icons, not just the same icon appearing in different contexts. For example:

misc.plus might be a simple plus sign (+)
optionPanel.plus might be a plus sign in a circle (⊕)

When customizing, you need to replace each instance separately to maintain visual consistency across the application.

Common Icons with Different Visual Styles

Icon Name	Technical Paths	Visual Differences	Used In Components
plus	`misc.plus` vs `optionPanel.plus`	Simple plus (+) vs Plus in circle (⊕)	mmq-zoom-buttons vs mmq-new-quantity-box
minus	`misc.minus` vs `optionPanel.minus`	Simple minus (-) vs Minus in circle (⊖)	mmq-zoom-buttons vs mmq-new-quantity-box
close	`misc.close` vs `widgets.closeFilled`	Outline X vs Filled X	mmq-side-panel-header vs mmq-logo-library
check	`misc.check` vs `misc.checkCircle`	Simple checkmark vs Checkmark in circle	mmq-basket-contact-details vs mmq-inline-notification
reset	`widgets.reset` vs `quickIcons.reset`	Simple arrow vs Circular arrow	mmq-image-configurator vs mmq-quick-icons

When customizing these icons, you should decide whether to:

Keep the visual distinction - Replace each icon with a custom version that maintains the intended visual difference
Create visual consistency - Use similar styles for related icons to create a more unified look

Either approach can work, but you should make the decision intentionally rather than accidentally overlooking these differences.

Icon Customization Methods

Using SVG Icons

SVG icons provide the best flexibility and scaling capabilities:

window.mimeeqApp.config.icons = {
  misc: {
    close: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor"><path d="M481-442 272-232q-9 9-19.5 9T232-233q-9-10-8.5-19t9.5-19l208-209-209-211q-8-9-8.5-18.5T232-729q10-10 20-10.5t20 9.5l209 210 207-210q9-9 19.5-9t20.5 10q9 10 8.5 19t-9.5 19L519-480l208 209q8 8 9 18t-8 20q-10 10-20 10.5t-20-9.5L481-442Z"/></svg>',
  },
};

Using Icon Fonts

You can also use icon fonts like Font Awesome:

window.mimeeqApp.config.icons = {
  misc: {
    close: '<i class="fas fa-times"></i>',
  },
  form: {
    search: '<i class="fas fa-search"></i>',
  }
};

Using Custom Components

For more advanced scenarios, you can use custom components:

window.mimeeqApp.config.icons = {
  quickIcons: {
    zoomAll: '<custom-zoom-icon></custom-zoom-icon>',
  },
};

Important Disclaimer About Icon Libraries

While the examples below show integration with icon libraries like Font Awesome, please note that not all icons can be directly used with external icon libraries. This is due to how the Mimeeq application processes and renders certain icons within its components.

Limitations and Solutions:

Some icons may not render correctly when using libraries like Font Awesome directly in the icon configuration
SVG is the most reliable format for custom icons and should be your first choice
If you prefer using icon libraries, consider these alternatives:
- Use direct SVG exports from the icon library
- Use web components that encapsulate the icon library, such as @riovir/wc-fontawesome
- Test each icon thoroughly in all contexts where it appears

The examples below have been carefully selected to work with the demonstrated approaches, but your specific implementation may require adjustments based on these limitations.

Examples

This guide provides practical, real-world examples of customizing icons in the Mimeeq configurator to create cohesive branded experiences.

Creating a Consistent Brand Experience with Material Design Icons

This example shows how to replace multiple icons across the configurator with Material Design icons to create a cohesive branded experience:

// Initialize Mimeeq with custom Material Design icons
window.mimeeqAppConfig = {
  icons: {
    // Quick icon toolbar icons
    quickIcons: {
      zoomAll: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>',
      undo: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M280-440q0 83 58.5 141.5T480-240q83 0 141.5-58.5T680-440q0-83-58.5-141.5T480-640h-80v-80h80q100 0 170 70t70 170q0 100-70 170t-170 70q-100 0-170-70t-70-170h80Z"/></svg>',
      redo: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M680-440q0 83-58.5 141.5T480-240q-83 0-141.5-58.5T280-440q0-83 58.5-141.5T480-640h80v-80h-80q-100 0-170 70t-70 170q0 100 70 170t170 70q100 0 170-70t70-170h-80Z"/></svg>',
      reset: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M480-160q-133 0-226.5-93.5T160-480q0-133 93.5-226.5T480-800q85 0 149 34.5T740-671v-129h80v280H540v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>',
      pdfSquare: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M320-600q17 0 28.5-11.5T360-640q0-17-11.5-28.5T320-680q-17 0-28.5 11.5T280-640q0 17 11.5 28.5T320-600Zm0 200v-160h-40v80h-40v80h80Zm120 0v-80h40v-40h-40v-40h80v160h-80Zm120 0v-160h80q17 0 28.5 11.5T680-520v40q0 17-11.5 28.5T640-440h-40v40h-40Zm40-80h40v-40h-40v40ZM280-240q-33 0-56.5-23.5T200-320v-320q0-33 23.5-56.5T280-720h400q33 0 56.5 23.5T760-640v320q0 33-23.5 56.5T680-240H280Zm0-80h400v-320H280v320Zm0 0v-320 320Z"/></svg>',
      imageSquare: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40-480v560-560Z"/></svg>',
      exportModel: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="m240-400 240-360 240 360H240ZM480-80 240-480h480L480-80Z"/></svg>',
      ar: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="m40-120 320-760h80l320 760h-82l-79-200H201l-79 200H40Zm189-280h342L400-720h-2l-169 320Zm511 280v-320h-80v-80h80v-80h80v80h80v80h-80v320h-80Z"/></svg>',
      enterFullscreen: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm720 0v-120H720v-80h200v200h-80Z"/></svg>',
      leaveFullscreen: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M240-240v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-520v-80h120v-120h80v200H120Zm520-200v120h120v80H560v-200h80Z"/></svg>',
    },
    
    // Side panel icons
    misc: {
      close: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>',
      caretDown: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M480-360 280-560h400L480-360Z"/></svg>',
      plus: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>',
      minus: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M200-440v-80h560v80H200Z"/></svg>',
    },
    
    // Quantity controls
    optionPanel: {
      plus: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>',
      minus: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M200-440v-80h560v80H200Z"/></svg>',
    },
    
    // Basket icons
    basket: {
      cart: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em"><path d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z" fill="currentColor"/></svg>',
    }
  }
};

Interactive Example

Before and After:

Before: Default Mimeeq icons with inconsistent styling
After: A consistent Material Design icon set that aligns with Google's design language, creating a familiar experience for users

Custom Branded Icon Set with Corporate Colors

This example demonstrates creating a branded experience by customizing SVG icons with corporate colors:

// Define corporate colors for use in icons
const BRAND_PRIMARY = '#0056b3';
const BRAND_SECONDARY = '#6c757d';
const BRAND_SUCCESS = '#28a745';
const BRAND_WARNING = '#ffc107';

// Apply custom branded icons
window.mimeeqAppConfig = {
  icons: {
    // Quick icon toolbar - commonly used icons with brand colors
    quickIcons: {
      // Zoom controls
      zoomAll: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_SUCCESS }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>`,

      // Fullscreen controls
      enterFullscreen: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_PRIMARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>`,
      leaveFullscreen: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_PRIMARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>`,

      // History controls
      undo: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_PRIMARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>`,
      redo: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_PRIMARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>`,
      reset: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_PRIMARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v6h6"></path><path d="M21 12A9 9 0 0 0 6 5.3L3 8"></path><path d="M21 22v-6h-6"></path><path d="M3 12a9 9 0 0 0 15 6.7l3-2.7"></path></svg>`,

      // Export functions
      pdfSquare: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_PRIMARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M9 15v-2h6v2"></path><path d="M9 18v-2h6v2"></path><path d="M9 12v-2h2v2"></path></svg>`,
      imageSquare: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_PRIMARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>`,
      exportModel: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_PRIMARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>`,

      // AR experience
      ar: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_PRIMARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 6v12h10l2-2 2 2h8V6H1z"></path><path d="M1 18l5-4-5-4"></path></svg>`,
    },

    // Zoom controls
    misc: {
      plus: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_SECONDARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
      caretDown: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_SECONDARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`,
    },
    optionPanel: {
      minus: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_SECONDARY }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
    },

    // Basket icon with brand color
    basket: {
      cart: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ BRAND_WARNING }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>`,
    }
  }
};

Interactive Example

Key Benefits:

Creates a cohesive brand experience with consistent colors across all icons
Makes the configurator feel like a natural extension of your website
Improves brand recognition by reinforcing brand colors throughout the interface

Animation and Interactivity with CSS

This example demonstrates adding animation to icons using CSS combined with SVG icons:

<style>
  /* Define animations for icons */
  @keyframes pulse{
    0%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.2); opacity:0.8; }
    100%{ transform:scale(1); opacity:1; }
  }

  /* Target specific icons for animation */
  .mmq-basket::part(icon){
    animation:pulse 2s infinite;
    transform-origin:center;
  }
</style>

<script>
  document.addEventListener('mimeeq-app-loaded', () => {
    window.mimeeqApp.config.icons = {
      // Cart icon with pulse animation
      basket: {
        cart: '<svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>',
      },
    };
    
    // Add data attributes to help target specific icons with CSS
    const observer = new MutationObserver(() => {
      document.querySelectorAll('.mmq-quick-icon-button').forEach(btn => {
        // Find which icon this button represents by checking its content
        if (btn.innerHTML.includes('reset-icon')) {
          btn.setAttribute('data-icon', 'reset');
        }
      });
    });
    
    // Start observing the document for added nodes
    observer.observe(document.body, { childList: true, subtree: true });
  });
</script>

Interactive Example

Animation Effects:

The cart icon in the basket button gently pulses to draw attention
The reset icon spins when hovered, providing visual feedback before action

Integrated example with Contextual Icon Styling

This example shows a comprehensive approach that changes icons based on context - using different styles for different functional areas:

document.addEventListener('mimeeq-app-loaded', () => {
  // Define a function to create SVG icons with specific colors
  function createSvgIcon(path, color = 'currentColor', viewBox = '0 0 24 24') {
    return `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="${viewBox}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
  }
  
  window.mimeeqApp.config.icons = {
    // Primary toolbar icons - most commonly accessed
    quickIcons: {
      // Zoom controls
      zoomAll: createSvgIcon('<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line>', '#0066cc'),
      
      // Fullscreen controls
      enterFullscreen: createSvgIcon('<polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line>', '#0066cc'),
      leaveFullscreen: createSvgIcon('<polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line>', '#0066cc'),
      
      // History controls
      reset: createSvgIcon('<path d="M3 2v6h6"></path><path d="M21 12A9 9 0 0 0 6 5.3L3 8"></path><path d="M21 22v-6h-6"></path><path d="M3 12a9 9 0 0 0 15 6.7l3-2.7"></path>', '#0066cc'),
      undo: createSvgIcon('<polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path>', '#0066cc'),
      redo: createSvgIcon('<polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path>', '#0066cc'),
      
      // Export functions
      pdfSquare: createSvgIcon('<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M9 15v-2h6v2"></path><path d="M9 18v-2h6v2"></path><path d="M9 12v-2h2v2"></path>', '#0066cc'),
      imageSquare: createSvgIcon('<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline>', '#0066cc'),
      exportModel: createSvgIcon('<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line>', '#0066cc'),
      
      // AR experience
      ar: createSvgIcon('<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line>', '#9933cc'),
    },
    
    // Navigation and zoom controls - neutral styling
    misc: {
      caretDown: createSvgIcon('<polyline points="6 9 12 15 18 9"></polyline>', '#555555'),
      plus: createSvgIcon('<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line>', '#555555'),
    },
    optionPanel: {
      minus: createSvgIcon('<circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line>', '#555555'),
    },
    
    // E-commerce icon with cart styling
    basket: {
      cart: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none">
        <circle cx="9" cy="21" r="1" fill="#0066cc" stroke="#0066cc"></circle>
        <circle cx="20" cy="21" r="1" fill="#0066cc" stroke="#0066cc"></circle>
        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" stroke="#0066cc" stroke-width="2"></path>
      </svg>`,
    }
  };
});

Interactive Example

Contextual Design Approach:

Primary Actions: Bold, brand-colored icons for the most important actions
Navigation Elements: Neutral, consistent icons for navigational controls
Form Controls: More playful, Font Awesome icons for interactive elements
Status Indicators: Semantic colors to indicate different message types
E-commerce Elements: Special styling for cart icons to emphasize purchasing

This approach creates a visual hierarchy that guides users through the interface while maintaining brand consistency.

Adapting to Light/Dark Mode

This example demonstrates how to automatically adapt icons to light and dark mode based on user preferences:

document.addEventListener('mimeeq-app-loaded', () => {
  // Function to detect current color scheme preference
  function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  }
  
  // Function to update icons based on color scheme
  function updateIconsForColorScheme() {
    const darkMode = isDarkMode();
    const iconColor = darkMode ? '#ffffff' : '#333333';
    const accentColor = darkMode ? '#5e9eff' : '#0066cc';
    
    window.mimeeqApp.config.icons = {
      // Quick icons toolbar - most commonly accessed icons
      quickIcons: {
        zoomAll: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>`,
        enterFullscreen: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>`,
        leaveFullscreen: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>`,
        reset: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v6h6"></path><path d="M21 12A9 9 0 0 0 6 5.3L3 8"></path><path d="M21 22v-6h-6"></path><path d="M3 12a9 9 0 0 0 15 6.7l3-2.7"></path></svg>`,
        undo: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>`,
        redo: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>`,
        pdfSquare: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M9 15v-2h6v2"></path><path d="M9 18v-2h6v2"></path><path d="M9 12v-2h2v2"></path></svg>`,
        imageSquare: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>`,
        ar: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>`,
        exportModel: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>`,
      },
      
      // Navigation controls
      misc: {
        plus: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>`,
        caretDown: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`,
      },
      optionPanel: {
        minus: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${ iconColor }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg>`,
      },
      // Basket icon
      basket: {
        cart: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="${iconColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>`,
      }
    };
  }
  
  // Initial update based on current preference
  updateIconsForColorScheme();
  
  // Listen for changes in color scheme preference
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateIconsForColorScheme);
});

Interactive Example

Key Features:

Automatically detects user's color scheme preference
Adapts icon colors to provide appropriate contrast in both light and dark modes
Updates dynamically if the user changes their system preference

This approach creates a more accessible interface that respects user preferences while maintaining brand consistency.

Industry-Specific Icon Sets

For furniture retailers, this example shows how to implement furniture-specific icons:

document.addEventListener('mimeeq-app-loaded', () => {
  window.mimeeqApp.config.icons = {
    // Common toolbar icons with furniture-specific design
    quickIcons: {
      // Zoom control for product viewing
      zoomAll: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        <line x1="11" y1="8" x2="11" y2="14"></line>
        <line x1="8" y1="11" x2="14" y2="11"></line>
      </svg>`,
      
      // Fullscreen viewing for furniture details
      enterFullscreen: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="15 3 21 3 21 9"></polyline>
        <polyline points="9 21 3 21 3 15"></polyline>
        <line x1="21" y1="3" x2="14" y2="10"></line>
        <line x1="3" y1="21" x2="10" y2="14"></line>
      </svg>`,
      leaveFullscreen: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="4 14 10 14 10 20"></polyline>
        <polyline points="20 10 14 10 14 4"></polyline>
        <line x1="14" y1="10" x2="21" y2="3"></line>
        <line x1="3" y1="21" x2="10" y2="14"></line>
      </svg>`,
      
      // History controls for configuration changes
      reset: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M3 2v6h6"></path>
        <path d="M21 12A9 9 0 0 0 6 5.3L3 8"></path>
        <path d="M21 22v-6h-6"></path>
        <path d="M3 12a9 9 0 0 0 15 6.7l3-2.7"></path>
      </svg>`,
      undo: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="9 14 4 9 9 4"></polyline>
        <path d="M20 20v-7a4 4 0 0 0-4-4H4"></path>
      </svg>`,
      redo: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="15 14 20 9 15 4"></polyline>
        <path d="M4 20v-7a4 4 0 0 1 4-4h12"></path>
      </svg>`,
      
      // Export functions for furniture catalogs
      pdfSquare: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <path d="M9 15v-2h6v2"></path>
        <path d="M9 18v-2h6v2"></path>
        <path d="M9 12v-2h2v2"></path>
      </svg>`,
      
      // AR for viewing furniture in home
      ar: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
        <line x1="3" y1="16" x2="21" y2="16"></line>
        <line x1="3" y1="12" x2="21" y2="12"></line>
        <line x1="3" y1="8" x2="21" y2="8"></line>
        <line x1="3" y1="4" x2="21" y2="4"></line>
      </svg>`,
    },
    
    // Zoom controls
    misc: {
      plus: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"></circle>
        <line x1="12" y1="8" x2="12" y2="16"></line>
        <line x1="8" y1="12" x2="16" y2="12"></line>
      </svg>`,
      caretDown: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="6 9 12 15 18 9"></polyline>
      </svg>`,
    },
    optionPanel: {
      minus: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"></circle>
        <line x1="8" y1="12" x2="16" y2="12"></line>
      </svg>`,
    },
    // Shopping cart for furniture items
    basket: {
      cart: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="9" cy="21" r="1"></circle>
        <circle cx="20" cy="21" r="1"></circle>
        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
      </svg>`,
    }
  };
});

Interactive Example

Industry Application:

Using furniture-specific iconography that matches the product domain
Material pattern icons for fabric and finish selection
Specialized layout icons for furniture arrangement and placement

This approach enhances usability by using domain-specific metaphors that furniture customers and professionals will intuitively understand.

Best Practices for Icon Customization

Maintain Visual Consistency: Use a consistent style across all icons for a cohesive look.
Size Appropriately: Ensure your icons are properly sized - most Mimeeq icons are designed for 24px or smaller.
Use currentColor: For SVG icons, use fill="currentColor" to inherit color from CSS.
Test Across Contexts: Some icons appear in multiple places - test your customizations in all contexts.
Consider State Changes: Icons may need to change appearance based on state (active, hover, disabled).
Focus on High-Impact Icons: Prioritize customizing the most visible icons first (close, plus/minus, controls).
Maintain Accessibility: Ensure icons are recognizable and maintain their semantic meaning.

Troubleshooting

Common Issues

Icons Not Appearing: Ensure your configuration is loaded before the Mimeeq embed and check for syntax errors.
Icons Too Large/Small: Check your SVG viewBox and dimensions match the space available.
SVG Syntax Problems: Validate your SVG syntax and ensure special characters are properly escaped.
Icons Not Updating: Some UI components may need to be refreshed to show updated icons.

Solutions

For syntax issues, validate your SVG code with an online validator.
To see runtime changes, navigate to a different section and back.
If using icon fonts, ensure the font is loaded before configuring icons.
Use the browser inspector to check if the icon is rendered but has styling issues.

Conclusion

Customizing icons in the Mimeeq configurator allows you to create a seamless brand experience. By understanding the functional contexts where icons appear, you can maintain a consistent visual language across your product configurator.

For the most comprehensive customization, consider replacing all icons in related functional groups, rather than individual icons, to maintain a cohesive appearance throughout the application.

Remember that icon customization is one part of the broader theming capabilities of Mimeeq, which also include colors, typography, and component styling to create a fully branded configuration experience.

Introduction​

Setting Up Icon Customization​

Initial Configuration​

Runtime Configuration Changes​

Icons by Application Component​

1. Side Panel & Options Menu​

2. Quick Icons Toolbar​

3. Image Panel & Media Controls​

4. AR Experience​

5. Modular Product Editor​

6. Basket & Shopping Cart​

7. Form & Input Controls​

8. Image Manipulation & Widgets​

9. Export & Document Operations​

10. Notifications & Messaging​

11. Social & Sharing​

Important Note on Icons with the Same Name​

Common Icons with Different Visual Styles​

Icon Customization Methods​

Using SVG Icons​

Using Icon Fonts​

Using Custom Components​

Important Disclaimer About Icon Libraries​

Limitations and Solutions:​

Examples​

Creating a Consistent Brand Experience with Material Design Icons​

Interactive Example​

Custom Branded Icon Set with Corporate Colors​

Interactive Example​

Animation and Interactivity with CSS​

Interactive Example​

Integrated example with Contextual Icon Styling​

Interactive Example​

Adapting to Light/Dark Mode​

Interactive Example​

Industry-Specific Icon Sets​

Interactive Example​

Best Practices for Icon Customization​

Troubleshooting​

Common Issues​

Solutions​

Conclusion​

Introduction

Setting Up Icon Customization

Initial Configuration

Runtime Configuration Changes

Icons by Application Component

1. Side Panel & Options Menu

2. Quick Icons Toolbar

3. Image Panel & Media Controls

4. AR Experience

5. Modular Product Editor

6. Basket & Shopping Cart

7. Form & Input Controls

8. Image Manipulation & Widgets

9. Export & Document Operations

10. Notifications & Messaging

11. Social & Sharing

Important Note on Icons with the Same Name

Common Icons with Different Visual Styles

Icon Customization Methods

Using SVG Icons

Using Icon Fonts

Using Custom Components

Important Disclaimer About Icon Libraries

Limitations and Solutions:

Examples

Creating a Consistent Brand Experience with Material Design Icons

Interactive Example

Custom Branded Icon Set with Corporate Colors

Interactive Example

Animation and Interactivity with CSS

Interactive Example

Integrated example with Contextual Icon Styling

Interactive Example

Adapting to Light/Dark Mode

Interactive Example

Industry-Specific Icon Sets

Interactive Example

Best Practices for Icon Customization

Troubleshooting

Common Issues

Solutions

Conclusion