Skip to main content

Icons Customization

Introduction​

Mimeeq's embed configurator UI offers extensive customization capabilities, allowing you to tailor the interface to match your brand and user preferences. One key aspect of this customization is the ability to provide your own icons, replacing the default ones used in various parts of the configurator. This not only enhances the visual appeal but also ensures a cohesive user experience.

We provide a comprehensive set of default icons categorized into groups such as basket, configurator, form, and misc, among others. These categories help identify the context in which each icon is used. However, some icons might appear in multiple contexts, such as a widget icon being used in a form or modular component.

Accessing the Icons Configuration​

To begin customizing the icons in the Mimeeq embed configurator, you need to access the MimeeqApiConfig.icons object. This object allows you to overwrite the built-in icons with your custom ones.

Initial Configuration Setup​

You can set the initial values by configuring the window.mimeeqAppConfig object before loading the Mimeeq embed. Here’s how you can do it:

window.mimeeqAppConfig = {
  icons: {
    misc: {
      close:
        '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" 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>',
    },
  },
};

By placing this configuration script in your HTML file before loading the Mimeeq embed script, the icons will be initialized with your custom SVG.

Runtime Configuration Changes​

If the Mimeeq embed is already loaded, you can still adjust the icon configuration at runtime by modifying the window.mimeeqApp.config.icons object. Here's an example:

document.addEventListener('mimeeq-app-loaded', () => {
  window.mimeeqApp.config.icons = {
    misc: {
      close:
        '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" 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>',
    },
  };
});

This approach allows you to dynamically update the icons after the configurator has been loaded, providing flexibility in responding to user actions or other runtime conditions.

Icon Categories and Customization Options​

Mimeeq categorizes its icons to help you easily identify and customize them based on their usage context. The main categories include basket, configurator, form, misc, and several others. Each category contains specific icons that you can customize individually.

Here’s a detailed breakdown of each category and the available customization options:

Basket Icons​

These icons are typically used in shopping cart and basket-related interfaces.

  • cart: Icon representing a shopping cart.
  • emptyCart: Icon for an empty cart.
  • envelope: Icon depicting an envelope.
Example:​
window.mimeeqApp.config.icons = {
  basket: {
    cart: '<svg ... >...</svg>',
    emptyCart: '<svg ... >...</svg>',
  },
};

Configurator Icons​

These icons appear in the product configurator interface.

  • 3d: Icon for 3D view thumbnail (used only if you also have 2d views).
  • arFailed: Icon indicating AR failure.
  • arrowDropDown: Icon for dropdown arrows.
  • fileJpeg: Icon representing JPEG files.
  • mousePointer: Icon for a information about activating canvas while working on POD widget image
Example:​
window.mimeeqApp.config.icons = {
  configurator: {
    '3d': '<svg ... >...</svg>',
    arrowDropDown: '<svg ... >...</svg>',
    mousePointer: '<svg ... >...</svg>',
  },
};

Form Icons​

These icons are used in forms and input fields.

  • checkedCheckbox: Icon for a checked checkbox.
  • checkedRadio: Icon for a checked radio button.
  • decrease: Icon for decreasing value.
  • search: Icon for search functionality.
  • uncheckedCheckbox: Icon for an unchecked checkbox.
Example:​
window.mimeeqApp.config.icons = {
  form: {
    checkedCheckbox: '<svg ... >...</svg>',
    search: '<svg ... >...</svg>',
  },
};

Miscellaneous Icons​

A general category for various icons used throughout the interface.

  • arrowDropUp: Icon for upward arrow dropdown.
  • close: Icon for closing windows or dialogs.
  • document: Icon representing a document.
  • download: Icon for download actions.
  • plus: Icon for addition or increment.
Example:​
window.mimeeqApp.config.icons = {
  misc: {
    close: '<svg ... >...</svg>',
    plus: '<svg ... >...</svg>',
  },
};

Quick Icons​

These icons are used for quick actions within the configurator.

  • ar: Icon for augmented reality.
  • dimensions: Icon representing button to enable displaying dimensions on canvas.
  • enterFullscreen: Icon for entering fullscreen mode.
  • exportModel: Icon for exporting a model.
  • gridOff: Icon for turning off the grid.
  • gridOn: Icon for turning on the grid.
  • heart: Icon representing a heart or favorite.
  • imageSquare: Icon for exporting an image.
  • leaveFullscreen: Icon for leaving fullscreen mode.
  • loadScene: Icon for loading a scene at modular.
  • pdfSquare: Icon for exporting a PDF.
  • priceSettings: Icon for price settings menu.
  • redo: Icon for redo action.
  • reset: Icon for reset action.
  • save: Icon for saving scene action.
  • share: Icon for sharing.
  • threeDots: Icon for more options (three dots) at mobile.
  • undo: Icon for undo action.
  • zoomAll: Icon for zooming all.
Example:​
window.mimeeqApp.config.icons = {
  quickIcons: {
    pdfSquare: '<svg ... >...</svg>',
    save: '<svg ... >...</svg>',
  },
};

Other Categories​

Other icon categories include modular, optionPanel, share, and widgets. Each category serves specific functionalities within the Mimeeq embed configurator.

Example:​
window.mimeeqApp.config.icons = {
  quickIcons: {
    pdfSquare: '<svg ... >...</svg>',
    save: '<svg ... >...</svg>',
  },
};

Customization Details​

When customizing icons, you can replace the default components with your own. While SVGs are commonly used, you can also use any other component, including icon fonts like Font Awesome. Keep in mind that the size of the icons may be limited by the space available in the UI.

Example Customization with Font Awesome:​
window.mimeeqApp.config.icons = {
  misc: {
    close: '<i class="fas fa-times"></i>',
  },
};

By following the examples and structure provided, you can easily customize each icon according to your needs, ensuring a consistent and branded user interface in the Mimeeq configurator.

Practical Examples of Customizing Icons​

Using SVG Icons​

One of the most common methods for customizing icons is by using SVG (Scalable Vector Graphics). SVG icons are flexible, lightweight, and can be easily styled with CSS. Here are some practical examples of how to replace default icons with custom SVG icons.

Example 1: Replacing the "Close" Icon​

window.mimeeqApp.config.icons = {
  misc: {
    close:
      '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" 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>',
  },
};

Example 2: Customizing the "Save" Icon in Quick Icons​

window.mimeeqApp.config.icons = {
  quickIcons: {
    save: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M17 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zM5 19V5h11.17L19 7.83V19H5zm7-3h2v-6h-2v6zm-4 0h2v-4H8v4z"/></svg>',
  },
};

Using Icon Fonts​

Icon fonts such as Font Awesome provide a convenient way to use vector icons that are scalable and customizable with CSS. Here's how you can integrate Font Awesome icons into your Mimeeq configurator.

Example 1: Using a Font Awesome "Close" Icon​

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

Example 2: Customizing the "Heart" Icon in Quick Icons​

window.mimeeqApp.config.icons = {
  quickIcons: {
    heart: '<i class="fas fa-heart"></i>',
  },
};

Using Custom Components​

You can also use custom components as icons, keeping in mind the size constraints of the UI.

Example 1: Custom Component for "Download" Icon​

window.mimeeqApp.config.icons = {
  misc: {
    download: '<custom-download-icon></custom-download-icon>',
  },
};

Example 2: Custom Component for "Zoom All" Icon in Quick Icons​

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

Considerations for Customizing Icons​

When customizing icons, keep the following considerations in mind:

  • Size Limitations: Ensure your custom icons fit within the available space in the UI.

  • Styling: Use CSS to style your icons appropriately, especially if you are using SVG or icon fonts.

  • Accessibility: Ensure that your icons are accessible and provide meaningful descriptions for screen readers.

  • Consistency: Maintain visual consistency across all icons to ensure a cohesive user experience.

  • By following these examples and considerations, you can effectively customize the icons in the Mimeeq embed configurator to match your brand and enhance the user interface.

Handling Runtime Changes​

Modifying Icons Configuration After Initialization​

While it's recommended to set your icon configurations before the Mimeeq embed configurator loads, you can also update the configuration at runtime. This can be useful for dynamic interfaces where icon styles might change based on user interactions or other conditions.

To modify the icons configuration after the configurator has already been loaded, use the following approach:

Example: Changing the "Save" Icon at Runtime​

  1. Listening for the Configurator Loaded Event: Ensure your code runs after the configurator has been initialized.
  2. Updating the Icons Configuration: Modify the window.mimeeqApp.config.icons object with new values.
document.addEventListener('mimeeq-app-loaded', () => {
  // Update the "save" icon in quickIcons category
  window.mimeeqApp.config.icons.quickIcons.save =
    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M17 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zM5 19V5h11.17L19 7.83V19H5zm7-3h2v-6h-2v6zm-4 0h2v-4H8v4z"/></svg>';
});

Best Practices for Updating Icons​

When customizing icons at runtime, consider the following best practices to ensure a smooth user experience:

  1. Early Updates: Aim to update the icons configuration as early as possible. Using the mimeeq-app-loaded event ensures changes are applied before the UI is rendered.
  2. UI Refresh: Be aware that changes to the icons may not immediately reflect in the UI if the relevant components have already been rendered. The updates will take effect when the affected parts of the UI are reloaded or refreshed, such as by navigating to a different section and returning.

By following these practices, you can dynamically update and manage your icon configurations, providing greater flexibility and control over the user interface.

FAQs and Troubleshooting​

Common Questions​

  1. Why aren't my custom icons appearing? Ensure your custom icons are set before the Mimeeq embed configurator is rendered. Use the mimeeq-app-loaded event to make updates at the appropriate time.

  2. Can I use non-SVG icons? Yes, you can use any component as an icon, including icon fonts like Font Awesome or custom components. Just ensure they fit within the size constraints of the UI.

  3. How do I revert to the default icons? To revert to the default icons, you can remove or reset the custom icon configurations in the window.mimeeqApp.config.icons object.

Troubleshooting Tips​

  • Check Syntax: Ensure your custom icon code (SVG, Font Awesome, etc.) is correct and properly formatted.
  • Verify Timing: Make sure your custom icon configurations are set early enough, preferably using the mimeeq-app-loaded event.
  • UI Refresh: If icons don't update immediately, trigger a UI refresh by navigating to a different section and returning.

Conclusion​

Customizing icons in the Mimeeq embed configurator allows you to tailor the user interface to better match your brand and enhance the overall user experience. By following the outlined steps and best practices, you can effectively manage and update your icon configurations.

For further assistance or more detailed examples, refer to the Mimeeq documentation or reach out to our support team.