### MUI-Icon Size Example Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/index.html Demonstrates applying different size variants to the `` component, such as 'xlarge', to visually adjust the icon's dimensions. ```HTML ``` -------------------------------- ### MUI-Icon Accessibility Example Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/index.html Illustrates how to use the `label` prop for accessibility. A meaningful icon with a text label uses the `label` prop, while a decorative icon without a text label omits it. ```HTML ``` -------------------------------- ### MUI-Icon Component with Large Size Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/cn/index.html Shows an example of using the MUI-Icon component with a specific size attribute ('xlarge') and a different icon ('save'). ```html ``` -------------------------------- ### Use MUI-Icon Component Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/README.md Demonstrates the basic usage of the `mui-icon` web component by specifying an icon name. It shows how kebab-case names are converted to PascalCase with an "Icon" suffix for fetching. ```html ``` -------------------------------- ### Basic Usage of MUI-Icon Component Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/cn/index.html Demonstrates how to include the MUI-Icon web component in an HTML file and use it to display an icon with a label. ```html ``` -------------------------------- ### Include and Use MUI-Icon Web Component Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/index.html Demonstrates how to include the MUI-Icon web component JavaScript file and then use the `` tag in your HTML with basic attributes like 'name' and 'label'. ```HTML ``` -------------------------------- ### Test Component Initialization (JavaScript) Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/test.html Verifies that the MUI Icon Web Component initializes correctly, creates its shadow DOM, and renders an SVG element within it. This test ensures the basic structure and rendering pipeline are functional. ```javascript function testComponentInitialization() { const results = document.getElementById('test1-results'); const component = document.querySelector('#test1 mui-icon'); if (!component) { results.textContent = 'FAIL: Component not found'; results.classList.add('test-fail'); return; } const shadowRoot = component.shadowRoot; if (!shadowRoot) { results.textContent = 'FAIL: Shadow DOM not created'; results.classList.add('test-fail'); return; } const svg = shadowRoot.querySelector('svg'); if (!svg) { results.textContent = 'FAIL: SVG not rendered'; results.classList.add('test-fail'); return; } results.textContent = 'PASS: Component initialized correctly'; results.classList.add('test-pass'); } ``` -------------------------------- ### Import MUI-Icon Component in JavaScript Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/README.md Shows how to import the `mui-icon.js` component into a JavaScript file, enabling its use within modern JavaScript projects and frameworks. ```javascript import './path/to/mui-icon.js'; ``` -------------------------------- ### Display Various MUI Icons Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/README.md Shows how to use the `mui-icon` component with different icon names, illustrating the flexibility in choosing icons from the Material UI library. ```html ``` -------------------------------- ### Include MUI-Icon Component Script Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/README.md Provides instructions on how to include the `mui-icon.js` file in an HTML document, either via a script tag or by importing it into JavaScript modules. ```html ``` -------------------------------- ### Dynamically Load MUI Icons with Web Component Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/cn/index.html This JavaScript code enables dynamic loading of MUI Icons via a web component. It listens for user input in a search field, validates the icon name, and updates a displayed icon element. It includes a delay to allow the web component to attempt loading and checks for the presence of an SVG element within the component's shadow DOM to confirm a valid icon. ```javascript document.addEventListener('DOMContentLoaded', () => { const iconSearch = document.getElementById('icon-search'); const loadButton = document.getElementById('load-icon'); const dynamicIcon = document.getElementById('dynamic-icon'); const iconName = document.getElementById('icon-name'); const status = document.getElementById('status'); const resultContainer = document.getElementById('dynamic-result'); loadButton.addEventListener('click', () => { const name = iconSearch.value.trim(); if (!name) { status.textContent = '请输入一个图标名称'; status.classList.remove('u-visually-hidden'); status.style.display = 'block'; resultContainer.style.display = 'none'; return; } status.textContent = `加载中...`; status.classList.remove('u-visually-hidden'); status.style.display = 'block'; resultContainer.style.display = 'none'; // Create a test icon element to check if the icon is valid const testIcon = document.createElement('mui-icon'); testIcon.style.position = 'absolute'; testIcon.style.opacity = '0'; testIcon.style.pointerEvents = 'none'; testIcon.setAttribute('name', name); document.body.appendChild(testIcon); // Check after a delay setTimeout(() => { // Directly inspect the shadow DOM const shadowRoot = testIcon.shadowRoot; const hasIcon = shadowRoot && shadowRoot.querySelector('svg') && shadowRoot.querySelector('svg').innerHTML.length > 20; // Remove the test element document.body.removeChild(testIcon); if (hasIcon) { // Icon exists, update the visible one dynamicIcon.setAttribute('name', name); dynamicIcon.setAttribute('size', 'xlarge'); iconName.textContent = name; status.textContent = `Successfully loaded icon: ${name}`; status.classList.add('u-visually-hidden'); resultContainer.style.display = 'grid'; } else { status.textContent = `找不到图标：${name}。请尝试其他名称。`; status.classList.remove('u-visually-hidden'); status.style.display = 'block'; resultContainer.style.display = 'none'; } // Scroll to results or status message const scrollTarget = hasIcon ? resultContainer : status; scrollTarget.scrollIntoView({ block: 'center', }); }, 1500); // Give enough time for the component to attempt loading }); // Allow pressing Enter to load the icon iconSearch.addEventListener('keypress', e => { if (e.key === 'Enter') { loadButton.click(); } }); // Also handle the initial empty state iconSearch.addEventListener('focus', () => { if (!iconSearch.value.trim()) { status.classList.remove('u-visually-hidden'); } }); }); ``` -------------------------------- ### Control MUI-Icon Size Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/README.md Demonstrates how to control the size of the `mui-icon` component using the `size` attribute, with predefined variants like `small`, `medium`, `large`, and `xlarge`. ```html ``` -------------------------------- ### MUI-Icon Web Component Props Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/index.html Defines the configurable properties (attributes) for the `` web component, including their types, default values, and descriptions for customization and accessibility. ```APIDOC MUI-Icon Component Props: name: string (required) Specifies which MUI Icon to display in lowercase and dash-separated format (e.g. `shopping-cart`, `arrow-back`). size: string (optional, default: inherits parent font size) Controls the icon size. Values: `small` (16px/1rem), `medium` (24px/1.5rem), `large` (32px/2rem), `xlarge` (48px/3rem). label: string (optional, default: decorative) When provided, adds accessibility information for screen readers with `aria-label`. When omitted, the icon is treated as decorative with `aria-hidden="true"`. ``` -------------------------------- ### Dynamically Load MUI Icons with JavaScript Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/index.html This snippet demonstrates how to dynamically load MUI icons into a web page using a custom web component. It includes user input for icon names, validation logic to check if an icon exists by inspecting its shadow DOM, and provides feedback to the user. The functionality relies on the MUI Icons web component and expects icon names in lowercase, dash-separated format. ```javascript document.addEventListener('DOMContentLoaded', () => { const iconSearch = document.getElementById('icon-search'); const loadButton = document.getElementById('load-icon'); const dynamicIcon = document.getElementById('dynamic-icon'); const iconName = document.getElementById('icon-name'); const status = document.getElementById('status'); const resultContainer = document.getElementById('dynamic-result'); loadButton.addEventListener('click', () => { const name = iconSearch.value.trim(); if (!name) { status.textContent = 'Please enter an icon name'; status.classList.remove('u-visually-hidden'); status.style.display = 'block'; resultContainer.style.display = 'none'; return; } status.textContent = `Loading...`; status.classList.remove('u-visually-hidden'); status.style.display = 'block'; resultContainer.style.display = 'none'; // Create a test icon element to check if the icon is valid const testIcon = document.createElement('mui-icon'); testIcon.style.position = 'absolute'; testIcon.style.opacity = '0'; testIcon.style.pointerEvents = 'none'; testIcon.setAttribute('name', name); document.body.appendChild(testIcon); // Check after a delay setTimeout(() => { // Directly inspect the shadow DOM const shadowRoot = testIcon.shadowRoot; const hasIcon = shadowRoot && shadowRoot.querySelector('svg') && shadowRoot.querySelector('svg').innerHTML.length > 20; // Remove the test element document.body.removeChild(testIcon); if (hasIcon) { // Icon exists, update the visible one dynamicIcon.setAttribute('name', name); dynamicIcon.setAttribute('size', 'xlarge'); iconName.textContent = name; status.textContent = `Successfully loaded icon: ${name}`; status.classList.add('u-visually-hidden'); resultContainer.style.display = 'grid'; } else { status.textContent = `Could not find icon: ${name}. Please try again or enter another name.`; status.classList.remove('u-visually-hidden'); status.style.display = 'block'; resultContainer.style.display = 'none'; } // Scroll to results or status message const scrollTarget = hasIcon ? resultContainer : status; scrollTarget.scrollIntoView({ block: 'center', }); }, 1500); // Give enough time for the component to attempt loading }); // Allow pressing Enter to load the icon iconSearch.addEventListener('keypress', e => { if (e.key === 'Enter') { loadButton.click(); } }); // Also handle the initial empty state iconSearch.addEventListener('focus', () => { if (!iconSearch.value.trim()) { status.classList.remove('u-visually-hidden'); } }); }); ``` -------------------------------- ### Accessible MUI-Icon with Label Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/cn/index.html Illustrates how to make an icon accessible by providing a 'label' attribute for screen readers, shown within a button element. ```html ``` -------------------------------- ### Customize MUI-Icon CSS Properties Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/README.md Demonstrates how to customize the size and color of the `mui-icon` component by setting CSS custom properties like `--icon-size-*` and `--icon-color`. ```css mui-icon { --icon-size-small: 1rem; --icon-size-medium: 1.5rem; --icon-size-large: 2rem; --icon-size-xlarge: 3rem; --icon-color: crimson; } ``` -------------------------------- ### Add Accessibility Label to MUI-Icon Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/README.md Shows how to provide an accessible name for the icon using the `label` attribute, making it meaningful for assistive technologies. ```html ``` -------------------------------- ### Use MUI-Icon Inline Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/README.md Illustrates how the `mui-icon` component functions as an inline element, inheriting the font size from its parent container when no specific size is provided. ```html

Click the button to add a new item.

``` -------------------------------- ### Test Dynamic Label Addition for MUI Icon Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/test.html Adds a 'label' attribute to the MUI icon component and verifies its correct application within the shadow DOM. This test checks the component's responsiveness to attribute changes. ```javascript document.getElementById('add-label').addEventListener('click', () => { component.setAttribute('label', 'Test label'); setTimeout(() => { const wrapper = component.shadowRoot.querySelector('.icon-wrapper'); const hasLabel = wrapper.getAttribute('aria-label') === 'Test label'; if (hasLabel) { output += 'PASS: Label was added correctly\n'; } else { output += 'FAIL: Label was not added correctly\n'; } results.textContent = output; }, 50); }); ``` -------------------------------- ### Test Size Variants (JavaScript) Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/test.html Checks if the component applies the correct CSS classes for different size attributes ('small', 'medium', 'large', 'xlarge'). It iterates through predefined components and verifies their size attribute against expected values. ```javascript function testSizeVariants() { const results = document.getElementById('test2-results'); const components = document.querySelectorAll('#test2 mui-icon'); let output = ''; let allPassed = true; const expectedSizes = ['small', 'medium', 'large', 'xlarge']; components.forEach((component, index) => { const size = component.getAttribute('size'); const isExpectedSize = size === expectedSizes[index]; if (!isExpectedSize) { output += `FAIL: Component ${index} has size "${size}" instead of "${expectedSizes[index]}"\n`; allPassed = false; } }); if (allPassed) { output = 'PASS: All size variants are correct'; results.classList.add('test-pass'); } else { results.classList.add('test-fail'); } results.textContent = output; } ``` -------------------------------- ### MUI-Icon Web Component CSS Custom Properties Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/index.html Lists the CSS custom properties available for styling the `` component, allowing fine-grained control over icon sizes and colors. These can be set on the `mui-icon` element itself. ```APIDOC MUI-Icon CSS Custom Properties: --icon-size-small: Size for `small` icons (default: 1rem). --icon-size-medium: Size for `medium` icons (default: 1.5rem). --icon-size-large: Size for `large` icons (default: 2rem). --icon-size-xlarge: Size for `xlarge` icons (default: 3rem). --icon-color: Color for the icon (default: inherits text color). Example Usage: mui-icon { --icon-size-small: 1rem; --icon-size-medium: 1.5rem; --icon-size-large: 2rem; --icon-size-xlarge: 3rem; --icon-color: crimson; } ``` -------------------------------- ### Test Dynamic Attribute Changes (JavaScript) Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/test.html Ensures the component updates its rendered SVG when attributes like 'name' or 'size' are changed dynamically after initialization. It uses event listeners on buttons to trigger attribute changes and verifies the output. ```javascript function testDynamicAttributeChanges() { const results = document.getElementById('test4-results'); const component = document.getElementById('dynamic-icon'); let output = ''; document.getElementById('change-icon').addEventListener('click', () => { component.setAttribute('name', 'favorite'); setTimeout(() => { const svg = component.shadowRoot.querySelector('svg'); const pathData = svg.querySelector('path').getAttribute('d'); const isFavoriteIcon = pathData.includes('21.35'); // Example check for favorite icon path data if (isFavoriteIcon) { output += 'PASS: Icon changed to favorite\n'; } else { output += 'FAIL: Icon did not change to favorite\n'; } results.textContent = output; }, 50); }); document.getElementById('change-size').addEventListener('click', () => { component.setAttribute('size', 'large'); setTimeout(() => { const hasLargeSize = component.getAttribute('size') === 'large'; if (hasLargeSize) { output += 'PASS: Size changed to large\n'; } else { output += 'FAIL: '; } results.textContent = output; }, 50); }); } ``` -------------------------------- ### Test Dynamic Size Change for MUI Icon Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/test.html Changes the 'size' attribute of the MUI icon component to 'large' and confirms the expected output message. This tests the component's handling of size-related attribute updates. ```javascript document.getElementById('change-size').addEventListener('click', () => { component.setAttribute('size', 'large'); setTimeout(() => { const output = 'Size did not change to large\n'; results.textContent = output; }, 50); }); ``` -------------------------------- ### Test Invalid Icon Name Handling in MUI Icon Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/test.html Tests how the MUI icon component handles an invalid icon name. It verifies that no SVG element is rendered when an unknown icon name is provided, ensuring graceful error handling. ```javascript function testInvalidIconName() { const results = document.getElementById('test5-results'); const component = document.querySelector('#test5 mui-icon'); if (!component) { results.textContent = 'FAIL: Component not found'; results.classList.add('test-fail'); return; } const shadowRoot = component.shadowRoot; if (!shadowRoot) { results.textContent = 'FAIL: Shadow DOM not created'; results.classList.add('test-fail'); return; } // The component should not render an SVG for an invalid name const svg = shadowRoot.querySelector('svg'); if (svg) { results.textContent = 'FAIL: SVG was rendered for invalid icon name'; results.classList.add('test-fail'); return; } results.textContent = 'PASS: Component handled invalid icon name correctly'; results.classList.add('test-pass'); } ``` -------------------------------- ### Decorative MUI-Icon without Label Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/cn/index.html Demonstrates a decorative icon usage where the 'label' attribute is omitted, relying on accompanying text for meaning, shown within a button element. ```html ``` -------------------------------- ### Test Invalid Icon Name (JavaScript) Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/test.html Tests the component's behavior when provided with an invalid or non-existent icon name. It checks if the component handles this gracefully, potentially by rendering a default state or showing an error, without crashing. ```javascript function testInvalidIconName() { const results = document.getElementById('test5-results'); const component = document.querySelector('#test5 mui-icon'); if (!component) { results.textContent = 'FAIL: Component not found for invalid name test'; results.classList.add('test-fail'); return; } // Assuming the component renders a default or empty state for invalid names // A more robust test might check for specific error messages or attributes. // For this example, we'll assume its presence and lack of critical errors is a pass. const shadowRoot = component.shadowRoot; if (!shadowRoot) { results.textContent = 'FAIL: Shadow DOM not created for invalid name test'; results.classList.add('test-fail'); return; } // Further checks could be added here, e.g., checking if an SVG is rendered or not. results.textContent = 'PASS: Component handled invalid icon name gracefully'; results.classList.add('test-pass'); } ``` -------------------------------- ### Test Accessibility (JavaScript) Source: https://github.com/mikemai2awesome/mui-icon-wc/blob/main/test.html Validates the component's accessibility features, specifically ARIA attributes. It checks if a decorative icon correctly sets `aria-hidden="true"` and if a labeled icon has the `aria-label` attribute matching its `label` property. ```javascript function testAccessibility() { const results = document.getElementById('test3-results'); const components = document.querySelectorAll('#test3 mui-icon'); let output = ''; let allPassed = true; // The first component should have aria-hidden="true" const decorativeComponent = components[0]; const decorativeWrapper = decorativeComponent.shadowRoot.querySelector('.icon-wrapper'); if (!decorativeWrapper || decorativeWrapper.getAttribute('aria-hidden') !== 'true') { output += 'FAIL: Decorative icon does not have aria-hidden="true"\n'; allPassed = false; } // The second component should have aria-label const labeledComponent = components[1]; const labeledWrapper = labeledComponent.shadowRoot.querySelector('.icon-wrapper'); const expectedLabel = labeledComponent.getAttribute('label'); if (!labeledWrapper || labeledWrapper.getAttribute('aria-label') !== expectedLabel) { output += `FAIL: Labeled icon does not have aria-label="${expectedLabel}"\n`; allPassed = false; } if (allPassed) { output = 'PASS: Accessibility attributes are correct'; results.classList.add('test-pass'); } else { results.classList.add('test-fail'); } results.textContent = output; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.