MUI-Icon Web Component

Want to use a Material UI icon without committing to a long-term relationship with the entire library? Now you can with an easy-to-use web component! Your users’ bandwidth will thank you, and your lighthouse score won’t need therapy anymore. Grab it on GitHub.

—Made by Mike Mai with

How To Use

9:55 
<!-- Include the JavaScript file -->
<script src="path/to/mui-icon.js"></script>

<!-- Then, include the component in your HTML -->
<mui-icon name="access-time" label="Party Time"></mui-icon>

Component Props

The <mui-icon> web component accepts the following props (i.e. attributes):

Prop Type Default Description
name string (required) Specifies which MUI Icon to display in lowercase and dash-separated format (e.g. shopping-cart, arrow-back).
size string null Controls the icon size. Values: small (16px/1rem), medium (24px/1.5rem), large (32px/2rem), xlarge (48px/3rem). When omitted, inherits the font size of its parent.
label string null When provided, adds accessibility information for screen readers with aria-label. When omitted, the icon is treated as decorative with aria-hidden="true".

CSS Custom Properties

The component also accepts the following CSS custom properties for custom styling:

Property Description
--icon-size-small Size for small icons.
--icon-size-medium Size for medium icons.
--icon-size-large Size for large icons.
--icon-size-xlarge Size for xlarge icons.
--icon-color Color for the icon. 
mui-icon {
  --icon-size-small: 1rem;
  --icon-size-medium: 1.5rem;
  --icon-size-large: 2rem;
  --icon-size-xlarge: 3rem;
  --icon-color: crimson;
}

Sizes

  • null
    (inherits font size)
  • small
    (16px)
  • medium
    (24px)
  • large
    (32px)
  • xlarge
    (48px)     
<mui-icon size="xlarge" name="save"></mui-icon>

Accessibility

Icons can be made meaningful for assistive technologies with the label prop: 

<!-- Meaningful Icon -->
<button>
  <mui-icon label="Save" name="save"></mui-icon>
</button>

<!-- Decorative Icon -->
<button>
  <mui-icon name="save"></mui-icon>
  <span>Save</span>
</button>
  1. The icon is given explicit label prop for assistive technologies because there is no visible text label.
  2. The icon omits the label prop because there is visible text label.

50 Most Popular Icons

  • home
  • menu
  • close
  • search
  • settings
  • account-circle
  • person
  • email
  • phone
  • message
  • notifications
  • favorite
  • star
  • shopping-cart
  • add
  • remove
  • delete
  • edit
  • save
  • share
  • download
  • upload
  • check
  • clear
  • arrow-back
  • arrow-forward
  • expand-more
  • expand-less
  • more-vert
  • more-horiz
  • refresh
  • location-on
  • calendar-today
  • event
  • access-time
  • alarm
  • visibility
  • visibility-off
  • lock
  • lock-open
  • info
  • warning
  • error
  • help
  • file-copy
  • folder
  • attach-file
  • link
  • print
  • send

Preview More Icons

Enter any MUI Icon name to load it dynamically. Use lowercase and dash-separated format (e.g. shopping-cart instead of ShoppingCart). For a full list of icons, see the MUI Icons documentation.