@material/mwc-icon
Advanced tools
A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)
A Material Components icon implementation using Web Components
The easiest way to try out mwc-icon is to use one of these online tools:
Runs in all supported browsers: StackBlitz, Glitch
Runs in browsers with JavaScript Modules: JSBin, CodePen.
You can also copy this HTML file into a local file and run it in any browser that supports JavaScript Modules.
When you're ready to use mwc-icon in a project, install it via npm. To run the project in the browser, a module-compatible toolctain is required. We recommend installing the Polymer CLI and using its development server as follows.
Ensure the webcomponents polyfills are included in your HTML page
Install webcomponents polyfills
npm i @webcomponents/webcomponentsjs
Add webcomponents polyfills to your HTML page
<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
Add mwc-icon to your project:
npm i @material/mwc-icon
Import the mwc-icon definition into your HTML page:
<script type="module" src="@material/mwc-icon/index.js"></script>
Or into your module script:
import {Icon} from "@material/mwc-icon"
Create an instance of mwc-icon in your HTML page, or via any framework that supports rendering Custom Elements:
<mwc-icon>sentiment_very_satisfied</mwc-icon>
Install the Polymer CLI:
npm i -g polymer-cli@next
Run the development server and open a browser pointing to its URL:
polymer serve
mwc-icon is published on npm using JavaScript Modules. This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.
However, since mwc-icon uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server
polymer serveautomatically handles this transform.
Tools like WebPack and Rollup can also be used to serve and/or bundle mwc-icon.
The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.
1.0.0-pre.0 (2023-01-09)
--md-text-button-container-shape-start-start<label>Checkbox <md-checkbox></md-checkbox></label>.linkAttributes (10cf00b)aria-label/role attributes to list, and customizable role to list item. (8f63406)aria-label support in menu, and set role=menu/menuitem for menu and menu item components. (7e35820)theme() mixins to style subcomponents. (f305806)flipMenuHorizontally property, add unit tests. (884c3a2)handle-height and handle-width which are not yet implmented. (e2f3c28)aria-label and aria-haspopup attributes from Button HTML if not set (5e2a46e)<mwc-icon> with <md-icon> (8720a77)disabled and checked on internal input element. (73ed7a0)formAssociated. (91c2425)value can overwrite defaultValue (58ae98c)FAQs
Material Design icon web component
The npm package @material/mwc-icon receives a total of 48,376 weekly downloads. As such, @material/mwc-icon popularity was classified as popular.
We found that @material/mwc-icon demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.