irisrad-ui/src/components/irisMUIcon/IrisMUIcon.js

UI elements developered for IRIS R&D Group Inc

import React from "react";
import "../../style/styles.css";
import PropTypes from "prop-types";
const MATERIAL_UI_ICON_BASIC_CLASS = "material-icons";

// different icons styles predefined by the google font for the material icons
const MUI_VARIANTS = ["two-tone", "sharp", "round", "outlined"];
// sizes of the material icons, defiend locally as the css is modified, easier to read and use
const MUI_SIZES = ["small", "medium", "large", "xlarge"];
function IrisMUIcon({
  variant,
  size = "medium",
  iconTitle,
  className = "",
  ...props
}) {
  const iconStyles = [MATERIAL_UI_ICON_BASIC_CLASS];
  if (MUI_VARIANTS.indexOf(variant) >= 0) {
    iconStyles.push(`${MATERIAL_UI_ICON_BASIC_CLASS}-${variant}`);
  }
  if (MUI_SIZES.indexOf(size) >= 0) {
    iconStyles.push(`${MATERIAL_UI_ICON_BASIC_CLASS}__size-${size}`);
  }

  if (typeof className === "string" && className !== "") {
    iconStyles.push(className);
  }
  return (
    <span className={iconStyles.join(" ")} {...props}>
      {iconTitle}
    </span>
  );
}

IrisMUIcon.propTypes = {
  className: PropTypes.string,
  iconTitle: PropTypes.string.isRequired, // material icons title, ie: home, local_fire_department, etc
  size: PropTypes.oneOf(MUI_SIZES), // icon sizes
  variant: PropTypes.oneOf(MUI_VARIANTS), // "" is default material icon styles, if given, value should be one of "two-tone" | "sharp" | "round" | "outlined"
};
export { IrisMUIcon };