Set custom text for material icon

Question

I want to use icons from import FiberNewIcon from "@mui/icons-material/FiberNew";

Is it possible to set a custom text into the icon?

Answer 1

The mentioned icon belongs to an icon package so you can't change it even with this post (mentioned in the comments). to check it, open the FiberNewIcon source file, is there any usual SVG? definitely No.

Since the FiberNewIcon is a simple text block, you can create it with simple HTML/CSS properties, let's do that:

import React from "react";

const MyIcon = ({ title }) => (
  <p
    style={{
      backgroundColor: "black",
      color: "white",
      fontSize: "40px",
      fontWeight: "bold",
      display: "inline-block",
      padding: "15px 8px 15px 8px",
      borderRadius: "12px"
    }}
  >
    {title}
  </p>
);

const Sample = () => {
  return (
    <div>
      <div>
        <MyIcon title={"New"} />
      </div>
      <div>
        <MyIcon title={"Delete"} />
      </div>
    </div>
  );
};

export default Sample;

Live in CodeSandbox

Note: You may need to add your custom fontFamily property to the icon style.

Note: you can pass some styles properties to the MyIcon props to control them from the parent component.

Note: You can also use the relative units (rem, em, %) to decorate your icon style to have a nice responsive result.