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

Action Icons

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

Common action icons for user interactions like adding, deleting, editing, searching, and settings management.

Capabilities

Core Actions

Primary action icons for the most common user interactions.

// Add/Create actions
import Add from "@material-ui/icons/Add";
import AddBox from "@material-ui/icons/AddBox";
import AddCircle from "@material-ui/icons/AddCircle";
import AddCircleOutline from "@material-ui/icons/AddCircleOutline";

// Delete/Remove actions  
import Delete from "@material-ui/icons/Delete";
import DeleteForever from "@material-ui/icons/DeleteForever";
import DeleteOutline from "@material-ui/icons/DeleteOutline";
import Remove from "@material-ui/icons/Remove";
import RemoveCircle from "@material-ui/icons/RemoveCircle";
import RemoveCircleOutline from "@material-ui/icons/RemoveCircleOutline";

// Edit/Modify actions
import Edit from "@material-ui/icons/Edit";
import EditOutlined from "@material-ui/icons/EditOutlined";
import Create from "@material-ui/icons/Create";

Search and Discovery

Icons for search, filtering, and content discovery.

// Search functionality
import Search from "@material-ui/icons/Search";
import SearchOutlined from "@material-ui/icons/SearchOutlined";
import FilterList from "@material-ui/icons/FilterList";
import Sort from "@material-ui/icons/Sort";
import Clear from "@material-ui/icons/Clear";
import FindInPage from "@material-ui/icons/FindInPage";
import FindReplace from "@material-ui/icons/FindReplace";

Settings and Configuration

Icons for settings, preferences, and configuration management.

// Settings and configuration
import Settings from "@material-ui/icons/Settings";
import SettingsOutlined from "@material-ui/icons/SettingsOutlined";
import SettingsApplications from "@material-ui/icons/SettingsApplications";
import Tune from "@material-ui/icons/Tune";
import Build from "@material-ui/icons/Build";
import BuildOutlined from "@material-ui/icons/BuildOutlined";

More Actions and Menus

Icons for additional actions, overflow menus, and contextual actions.

// More actions and menus
import MoreVert from "@material-ui/icons/MoreVert";
import MoreHoriz from "@material-ui/icons/MoreHoriz";
import Launch from "@material-ui/icons/Launch";
import OpenInNew from "@material-ui/icons/OpenInNew";
import OpenInBrowser from "@material-ui/icons/OpenInBrowser";
import OpenWith from "@material-ui/icons/OpenWith";

Refresh and Sync

Icons for refresh operations, synchronization, and data updates.

// Refresh and sync actions
import Refresh from "@material-ui/icons/Refresh";
import RefreshOutlined from "@material-ui/icons/RefreshOutlined";
import Sync from "@material-ui/icons/Sync";
import SyncOutlined from "@material-ui/icons/SyncOutlined";
import Update from "@material-ui/icons/Update";
import Replay from "@material-ui/icons/Replay";

Undo and Redo

Icons for undo/redo operations and history management.

// Undo/Redo operations
import Undo from "@material-ui/icons/Undo";
import UndoOutlined from "@material-ui/icons/UndoOutlined";
import Redo from "@material-ui/icons/Redo";
import RedoOutlined from "@material-ui/icons/RedoOutlined";
import History from "@material-ui/icons/History";
import RestoreFromTrash from "@material-ui/icons/RestoreFromTrash";

Usage Examples:

import React from 'react';
import { Add, Delete, Edit, Search, Settings, MoreVert } from '@material-ui/icons';
import { IconButton, Tooltip } from '@material-ui/core';

function ActionToolbar() {
  return (
    <div>
      <Tooltip title="Add new item">
        <IconButton>
          <Add />
        </IconButton>
      </Tooltip>
      
      <Tooltip title="Search">
        <IconButton>
          <Search />
        </IconButton>
      </Tooltip>
      
      <Tooltip title="Settings">
        <IconButton>
          <Settings />
        </IconButton>
      </Tooltip>
      
      <Tooltip title="More actions">
        <IconButton>
          <MoreVert />
        </IconButton>
      </Tooltip>
    </div>
  );
}

// Using different variants
function ActionVariants() {
  return (
    <div>
      <Add /> {/* Filled version */}
      <AddOutlined /> {/* Outlined version */}
      <AddRounded /> {/* Rounded version */}
      <AddSharp /> {/* Sharp version */}
      <AddTwoTone /> {/* Two-tone version */}
    </div>
  );
}