tessl/npm-material-ui--icons

Material Design SVG icons converted to Material-UI React components.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@material-ui/icons

Name: tessl/npm-material-ui--icons
Author: tessl

@material-ui/icons provides Google Material Design icons as React components that integrate seamlessly with Material-UI. The library offers over 1,100 pre-built SVG icons as individual React components, enabling developers to easily incorporate consistent, scalable Material Design iconography into their React applications.

Package Information

Package Name: @material-ui/icons
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install @material-ui/icons @material-ui/core
Peer Dependencies: Requires @material-ui/core, react, and react-dom

Core Imports

import { AccessAlarm, Add, Delete, Settings } from "@material-ui/icons";

For individual imports (recommended for tree-shaking):

import AccessAlarm from "@material-ui/icons/AccessAlarm";
import Add from "@material-ui/icons/Add";

CommonJS:

const { AccessAlarm, Add, Delete, Settings } = require("@material-ui/icons");

Basic Usage

import React from 'react';
import { Add, Delete, Settings } from '@material-ui/icons';

function MyComponent() {
  return (
    <div>
      <Add color="primary" fontSize="large" />
      <Delete color="secondary" />
      <Settings style={{ color: '#ff5722' }} />
    </div>
  );
}

Architecture

@material-ui/icons is built around several key concepts:

Icon Components: Each icon is a React functional component that wraps Material-UI's SvgIcon
Style Variants: Most icons are available in 5 different visual styles (Filled, Outlined, Rounded, Sharp, TwoTone)
SvgIcon Integration: All icons leverage Material-UI's SvgIcon component for consistent theming and styling
Tree-shaking Support: Individual icon imports minimize bundle size
TypeScript Support: Full type definitions for all icon components

Icon Variants

Each base icon is typically available in 5 style variants:

Base/Filled (e.g., Add): Default filled Material Design style
Outlined (e.g., AddOutlined): Outlined/stroked version with transparent fill
Rounded (e.g., AddRounded): Rounded corner version for softer appearance
Sharp (e.g., AddSharp): Sharp corner version for more geometric look
TwoTone (e.g., AddTwoTone): Two-tone version with primary and secondary colors

Capabilities

Action Icons

Common action icons for user interactions like adding, deleting, editing, and navigation.

// Core action icons
import Add from "@material-ui/icons/Add";
import Delete from "@material-ui/icons/Delete";
import Edit from "@material-ui/icons/Edit";
import Search from "@material-ui/icons/Search";
import Settings from "@material-ui/icons/Settings";
import MoreVert from "@material-ui/icons/MoreVert";

Action Icons

Navigation Icons

Icons for navigation, menus, arrows, and directional indicators.

// Navigation and directional icons
import ArrowBack from "@material-ui/icons/ArrowBack";
import ArrowForward from "@material-ui/icons/ArrowForward";
import Menu from "@material-ui/icons/Menu";
import Close from "@material-ui/icons/Close";
import ExpandMore from "@material-ui/icons/ExpandMore";
import ChevronLeft from "@material-ui/icons/ChevronLeft";

Navigation Icons

Communication Icons

Icons for communication features like messaging, calls, and social interactions.

// Communication icons
import Email from "@material-ui/icons/Email";
import Phone from "@material-ui/icons/Phone";
import Chat from "@material-ui/icons/Chat";
import Message from "@material-ui/icons/Message";
import VideoCall from "@material-ui/icons/VideoCall";

Communication Icons

Content Icons

Icons for content management, file operations, and text editing.

// Content and file icons
import FileCopy from "@material-ui/icons/FileCopy";
import Save from "@material-ui/icons/Save";
import Share from "@material-ui/icons/Share";
import CloudDownload from "@material-ui/icons/CloudDownload";
import CloudUpload from "@material-ui/icons/CloudUpload";
import Folder from "@material-ui/icons/Folder";

Content Icons

Toggle Icons

Icons for toggles, checkboxes, radio buttons, and selection states.

// Toggle and selection icons
import CheckBox from "@material-ui/icons/CheckBox";
import CheckBoxOutlineBlank from "@material-ui/icons/CheckBoxOutlineBlank";
import RadioButtonChecked from "@material-ui/icons/RadioButtonChecked";
import RadioButtonUnchecked from "@material-ui/icons/RadioButtonUnchecked";
import ToggleOn from "@material-ui/icons/ToggleOn";
import ToggleOff from "@material-ui/icons/ToggleOff";

Toggle Icons

Media & Entertainment Icons

Icons for media playback, camera functionality, audio controls, and entertainment features.

// Media playback and camera controls
import PlayArrow from "@material-ui/icons/PlayArrow";
import Pause from "@material-ui/icons/Pause";
import VolumeUp from "@material-ui/icons/VolumeUp";
import PhotoCamera from "@material-ui/icons/PhotoCamera";
import Videocam from "@material-ui/icons/Videocam";
import MusicNote from "@material-ui/icons/MusicNote";

Media Icons

Places & Location Icons

Icons for locations, buildings, navigation, and place-based services.

// Location and navigation icons
import LocationOn from "@material-ui/icons/LocationOn";
import Home from "@material-ui/icons/Home";
import Business from "@material-ui/icons/Business";
import Restaurant from "@material-ui/icons/Restaurant";
import LocalHospital from "@material-ui/icons/LocalHospital";
import Directions from "@material-ui/icons/Directions";

Places Icons

Devices & Hardware Icons

Icons for electronic devices, computer hardware, and technology equipment.

// Device and hardware icons
import Computer from "@material-ui/icons/Computer";
import PhoneAndroid from "@material-ui/icons/PhoneAndroid";
import Laptop from "@material-ui/icons/Laptop";
import Keyboard from "@material-ui/icons/Keyboard";
import Wifi from "@material-ui/icons/Wifi";
import Bluetooth from "@material-ui/icons/Bluetooth";

Devices Icons

Types

All icon components share the same props interface from Material-UI's SvgIcon:

// All icon components inherit from Material-UI's SvgIcon
interface SvgIconProps {
  /** Node passed into the SVG element */
  children?: React.ReactNode;
  /** Override or extend the styles applied to the component */
  classes?: Partial<SvgIconClassKey>;
  /** Custom CSS class name */
  className?: string;
  /** The color of the component. Supports theme colors. */
  color?: 'inherit' | 'primary' | 'secondary' | 'action' | 'disabled' | 'error';
  /** The component used for the root node */
  component?: React.ElementType;
  /** The fontSize applied to the icon. Defaults to 24px. */
  fontSize?: 'inherit' | 'default' | 'small' | 'large';
  /** Applies a color attribute to the SVG element */
  htmlColor?: string;
  /** The shape-rendering attribute for controlling rendering quality */
  shapeRendering?: string;
  /** Custom inline styles */
  style?: React.CSSProperties;
  /** Provides a human-readable title for the element */
  titleAccess?: string;
  /** Allows you to redefine coordinates without units inside an SVG element */
  viewBox?: string;
}

type SvgIconClassKey = 
  | 'root'
  | 'colorPrimary'
  | 'colorSecondary' 
  | 'colorAction'
  | 'colorError'
  | 'colorDisabled'
  | 'fontSizeInherit'
  | 'fontSizeSmall'
  | 'fontSizeLarge';

// Every icon component follows this signature
type IconComponent = React.ComponentType<SvgIconProps>;