@material/react-icon-button
Advanced tools
A React version of an MDC Icon Button.
npm install @material/react-icon-button
import React from 'react';
import IconButton from '@material/react-icon-button';
import MaterialIcon from '@material/react-material-icon';
class MyApp extends React.Component {
render() {
return (
<IconButton>
<MaterialIcon icon='favorite' />
</IconButton>
);
}
}
You can use any other icon here such as Font Awesome, which is documented more in detail here. If you're using Google Font's Material Icons, we recommend using our Material Icon Component as shown in the example above.
If you need to use this component as an Icon Button Toggle, please read this documentation. The following is an example using the <IconToggle /> component as children of <IconButton>. One component with the isOn prop, and one without.
import React from 'react';
import IconButton, {IconToggle} from '@material/react-icon-button';
import MaterialIcon from '@material/react-material-icon';
class MyApp extends React.Component {
render() {
return (
<IconButton>
<IconToggle isOn>
<MaterialIcon icon='favorite' />
</IconToggle>
<IconToggle>
<MaterialIcon icon='favorite_border' />
</IconToggle>
</IconButton>
);
}
}
| Prop Name | Type | Description |
|---|---|---|
| children | Element | Icon element or text to be displayed within root element. |
| className | String | Classes to be applied to the root element. |
| disabled | Boolean | Disables button if true. |
| isLink | Boolean | Changes root element to an anchor tag (default button). |
| onClick | Function | Click event handler. Event is passed as an argument |
Sass mixins may be available to customize various aspects of the Components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.
0.5.0 (2018-09-25)
selectedChipIds and handleSelect props in ChipSet and id prop in Chip.<a name="0.4.2"></a>
FAQs
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.
Research
/Security News
Two npm packages masquerading as WhatsApp developer libraries include a kill switch that deletes all files if the phone number isn’t whitelisted.
Research
/Security News
Socket uncovered 11 malicious Go packages using obfuscated loaders to fetch and execute second-stage payloads via C2 domains.
Security News
TC39 advances 11 JavaScript proposals, with two moving to Stage 4, bringing better math, binary APIs, and more features one step closer to the ECMAScript spec.