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

Toggle Icons

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

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

Capabilities

Checkbox Icons

Icons for checkbox states and selection controls.

// Checkbox states
import CheckBox from "@material-ui/icons/CheckBox";
import CheckBoxOutlined from "@material-ui/icons/CheckBoxOutlined";
import CheckBoxOutlineBlank from "@material-ui/icons/CheckBoxOutlineBlank";
import CheckBoxOutlineBlankOutlined from "@material-ui/icons/CheckBoxOutlineBlankOutlined";
import IndeterminateCheckBox from "@material-ui/icons/IndeterminateCheckBox";
import IndeterminateCheckBoxOutlined from "@material-ui/icons/IndeterminateCheckBoxOutlined";

// Check marks
import Check from "@material-ui/icons/Check";
import CheckOutlined from "@material-ui/icons/CheckOutlined";
import CheckCircle from "@material-ui/icons/CheckCircle";
import CheckCircleOutline from "@material-ui/icons/CheckCircleOutline";
import CheckCircleOutlined from "@material-ui/icons/CheckCircleOutlined";

Radio Button Icons

Icons for radio button states and single-selection controls.

// Radio button states
import RadioButtonChecked from "@material-ui/icons/RadioButtonChecked";
import RadioButtonUnchecked from "@material-ui/icons/RadioButtonUnchecked";
import RadioButtonCheckedOutlined from "@material-ui/icons/RadioButtonCheckedOutlined";
import RadioButtonUncheckedOutlined from "@material-ui/icons/RadioButtonUncheckedOutlined";

// Selection indicators
import FiberManualRecord from "@material-ui/icons/FiberManualRecord";
import FiberManualRecordOutlined from "@material-ui/icons/FiberManualRecordOutlined";

Toggle Switch Icons

Icons for toggle switches and on/off states.

// Toggle switches
import ToggleOn from "@material-ui/icons/ToggleOn";
import ToggleOnOutlined from "@material-ui/icons/ToggleOnOutlined";
import ToggleOff from "@material-ui/icons/ToggleOff";
import ToggleOffOutlined from "@material-ui/icons/ToggleOffOutlined";

// Power states
import PowerSettingsNew from "@material-ui/icons/PowerSettingsNew";
import PowerSettingsNewOutlined from "@material-ui/icons/PowerSettingsNewOutlined";
import Power from "@material-ui/icons/Power";
import PowerOff from "@material-ui/icons/PowerOff";

Star Rating Icons

Icons for star ratings and favoriting functionality.

// Star ratings
import Star from "@material-ui/icons/Star";
import StarOutlined from "@material-ui/icons/StarOutlined";
import StarBorder from "@material-ui/icons/StarBorder";
import StarBorderOutlined from "@material-ui/icons/StarBorderOutlined";
import StarHalf from "@material-ui/icons/StarHalf";
import StarHalfOutlined from "@material-ui/icons/StarHalfOutlined";

// Favorites
import Favorite from "@material-ui/icons/Favorite";
import FavoriteOutlined from "@material-ui/icons/FavoriteOutlined";
import FavoriteBorder from "@material-ui/icons/FavoriteBorder";
import FavoriteBorderOutlined from "@material-ui/icons/FavoriteBorderOutlined";

Bookmark Icons

Icons for bookmarking and saved items.

// Bookmarks
import Bookmark from "@material-ui/icons/Bookmark";
import BookmarkOutlined from "@material-ui/icons/BookmarkOutlined";
import BookmarkBorder from "@material-ui/icons/BookmarkBorder";
import BookmarkBorderOutlined from "@material-ui/icons/BookmarkBorderOutlined";
import BookmarkAdded from "@material-ui/icons/BookmarkAdded";
import BookmarkAddedOutlined from "@material-ui/icons/BookmarkAddedOutlined";

// Flag and pin
import Flag from "@material-ui/icons/Flag";
import FlagOutlined from "@material-ui/icons/FlagOutlined";
import PushPin from "@material-ui/icons/PushPin";
import PushPinOutlined from "@material-ui/icons/PushPinOutlined";

Thumb Voting Icons

Icons for thumbs up/down voting and approval systems.

// Thumb voting
import ThumbUp from "@material-ui/icons/ThumbUp";
import ThumbUpOutlined from "@material-ui/icons/ThumbUpOutlined";
import ThumbDown from "@material-ui/icons/ThumbDown";
import ThumbDownOutlined from "@material-ui/icons/ThumbDownOutlined";
import ThumbsUpDown from "@material-ui/icons/ThumbsUpDown";
import ThumbsUpDownOutlined from "@material-ui/icons/ThumbsUpDownOutlined";

Expand/Collapse Icons

Icons for expandable content and accordion controls.

// Expand/Collapse
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import UnfoldLess from "@material-ui/icons/UnfoldLess";
import UnfoldMore from "@material-ui/icons/UnfoldMore";
import ExpandLessOutlined from "@material-ui/icons/ExpandLessOutlined";
import ExpandMoreOutlined from "@material-ui/icons/ExpandMoreOutlined";

Usage Examples:

import React, { useState } from 'react';
import { 
  CheckBox, 
  CheckBoxOutlineBlank,
  RadioButtonChecked,
  RadioButtonUnchecked,
  ToggleOn,
  ToggleOff,
  Star,
  StarBorder,
  Favorite,
  FavoriteBorder,
  ExpandMore,
  ExpandLess
} from '@material-ui/icons';
import { IconButton, Collapse } from '@material-ui/core';

// Checkbox component
function CustomCheckbox({ checked, onChange, label }) {
  return (
    <div onClick={() => onChange(!checked)} style={{ cursor: 'pointer' }}>
      {checked ? <CheckBox color="primary" /> : <CheckBoxOutlineBlank />}
      <span style={{ marginLeft: 8 }}>{label}</span>
    </div>
  );
}

// Radio button group
function RadioGroup({ options, selected, onChange }) {
  return (
    <div>
      {options.map((option) => (
        <div key={option.value} onClick={() => onChange(option.value)} style={{ cursor: 'pointer' }}>
          {selected === option.value ? <RadioButtonChecked color="primary" /> : <RadioButtonUnchecked />}
          <span style={{ marginLeft: 8 }}>{option.label}</span>
        </div>
      ))}
    </div>
  );
}

// Toggle switch
function ToggleSwitch({ enabled, onChange, label }) {
  return (
    <div onClick={() => onChange(!enabled)} style={{ cursor: 'pointer' }}>
      {enabled ? <ToggleOn color="primary" /> : <ToggleOff />}
      <span style={{ marginLeft: 8 }}>{label}</span>
    </div>
  );
}

// Star rating
function StarRating({ rating, maxRating = 5, onChange }) {
  return (
    <div>
      {Array.from({ length: maxRating }, (_, index) => (
        <IconButton key={index} onClick={() => onChange(index + 1)}>
          {index < rating ? <Star color="primary" /> : <StarBorder />}
        </IconButton>
      ))}
    </div>
  );
}

// Favorite button
function FavoriteButton({ isFavorite, onChange }) {
  return (
    <IconButton onClick={() => onChange(!isFavorite)}>
      {isFavorite ? <Favorite color="error" /> : <FavoriteBorder />}
    </IconButton>
  );
}

// Expandable section
function ExpandableSection({ title, children, defaultExpanded = false }) {
  const [expanded, setExpanded] = useState(defaultExpanded);

  return (
    <div>
      <div 
        onClick={() => setExpanded(!expanded)} 
        style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
      >
        <span>{title}</span>
        {expanded ? <ExpandLess /> : <ExpandMore />}
      </div>
      <Collapse in={expanded}>
        <div style={{ paddingLeft: 16 }}>
          {children}
        </div>
      </Collapse>
    </div>
  );
}

// Multi-select list
function MultiSelectList({ items, selectedItems, onSelectionChange }) {
  const toggleSelection = (item) => {
    const isSelected = selectedItems.includes(item.id);
    if (isSelected) {
      onSelectionChange(selectedItems.filter(id => id !== item.id));
    } else {
      onSelectionChange([...selectedItems, item.id]);
    }
  };

  return (
    <div>
      {items.map((item) => (
        <div key={item.id} onClick={() => toggleSelection(item)} style={{ cursor: 'pointer' }}>
          {selectedItems.includes(item.id) ? <CheckBox color="primary" /> : <CheckBoxOutlineBlank />}
          <span style={{ marginLeft: 8 }}>{item.name}</span>
        </div>
      ))}
    </div>
  );
}