Swapping out Material UI icons for Material Design icons

Using material UI icons, I have a camera icon with an AddIcon connected to it. I want to replace the plus sign (AddIcon) with alphabet letters using 'materialdesignicons'. Is there a way to do this? For example, replacing the plus sign with the letter 'b' from 'materialdesignicons'.

Here is my code: codesandbox: https://codesandbox.io/s/svgiconssize-demo-material-ui-forked-yfs77g?file=/index.tsx:73-134

code:

import * as React from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";

import AddIcon from "@mui/icons-material/Add";
import CameraAltOutlinedIcon from "@mui/icons-material/CameraAltOutlined";
export default function SvgIconsSize() {
  return (
    <Container sx={{ background: "black", height: "100vh" }}>
     
      <Box // This is your container
        sx={{
          position: "relative",
          display: "initial",
          color: "black", 
          width: "50px", 
          height: "50px"
        }}
      >
        <CameraAltOutlinedIcon sx={{ fontSize: 40, color: "white" }} />
        <AddIcon 
          sx={{
            position: "absolute",
            right: "-6px",
            bottom: "1px",
            fontSize: 22,
            strokeWidth: "4",
            stroke: "white"
          }}
        />
        <AddIcon 
          sx={{
            position: "absolute",
            right: "-6px",
            bottom: "1px",
            color: "black", 
            fontSize: 22
          }}
        />
      </Box>
      {/* UNTIL HERE */}
    </Container>
  );
}

I want to use: import { mdiAlphaB } from '@mdi/js';

Following this tutorial:

However, all I get is a rotating 'b'. I want it to look like this: https://i.sstatic.net/Lxu2b.png Instead of the plus sign, I want the letter 'b'. Any suggestions?

Answer №1

To begin, you must first set up material design icons by executing the following command:

npm install @mdi/react @mdi/js

Next, import them like this:

import Icon from '@mdi/react'
import { mdiAlphaB } from "@mdi/js";   // The icon to be used

Then, swap out this code snippet:

<AddIcon // This is plus icon
          sx={{
            position: "absolute",
            right: "-6px",
            bottom: "1px",
            color: "black", //  plus icon takes the fill color from here
            fontSize: 22
          }}
        />

with the following:

<Icon   //B icon
          path={mdiAlphaB}
          title="User Profile"
          size={2}
          color="white"
          style={{
            position: "absolute",
            left: "15px",
            top: "-10px"
          }}
        />
        )

Lastly, adjust the position property as needed. And there you have it - all done. Link to codesandbox

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am having trouble with the $lookup in MongoDB and Node.js as it is not returning any results

I've been struggling to find a way to search for data with a foreign key in my model. Here is the structure of my model: const mongoose = require('mongoose'); const UserCGN = mongoose.Schema({ username: String, cours: String }) mod ...

Converting JavaScript functions to Java remote method interfaces

Experience: A while back, I was involved in developing a Java Server-Client application for building automation purposes. Initially, we used Java RMI to connect the server and client but soon realized that utilizing JavaScript for the client side would be ...

Dimensions of Titles (H1, H2 etc)

I am looking to have a unique background color for my headers from h1 through h6. The width of this background should match the width of the text in the header, along with padding. Currently, the background width is matching the container instead of the te ...

Encountering a "ref missing" error when attempting to integrate Draft.js with Material

I am currently facing challenges when trying to integrate Draft.js with Material UI's TextField component (or Input). Even after following the provided documentation (https://material-ui.com/components/text-fields/#integration-with-3rd-party-input-lib ...

Issue with displaying calendar after dynamic import in NextJS using fullcalendar

I am currently utilizing NextJS and Fullcalendar in my project. Following an example on dynamic imports from this source(for more details, the solution is referenced from here). Even though it initially worked, there was a recurring issue where every 1 o ...

Tips for utilizing innerHeight for a div during both window loading and resizing tasks?

I'm currently working on calculating the top/bottom padding of a div (.content) based on its height, and updating it upon loading and resizing the window. The goal is to have it centered nicely next to another div (.character) positioned beside it. I ...

Issues with AJAX formData functionality

I'm having difficulties with the formData in my Ajax calls. I have searched extensively for solutions and tried various approaches, including using getElementById, but nothing seems to work. The form in question has an id of add-lang-form: <form ...

Why does my array seem to update only once in the view?

I am currently working on a project that aims to visually represent sorting algorithms, but I have encountered an issue. In order to effectively visualize the sorting process of an algorithm, it is crucial to display every change in the array as the proc ...

What is the best way to incorporate spacing between rows in material UI and React?

How do I add spacing between each row in my table using MUI? I've tried using borderSpacing: '0px 10px!important' and borderCollapse: 'separate!important' but it's not working. Any suggestions on how to achieve this with MUI w ...

Using ReactJS: How to integrate react-select into a field component of a redux-form

Working with the react-select library has presented some challenges. I am currently utilizing the redux-form library and importing the <Field /> component from it in order to submit form values to a service. The code provided below functions properl ...

Developing an HTML table by merging data from multiple MySQL tables

Currently working on a website for a school project which involves constructing multiple webpages to display tabular data retrieved from a database using While and Foreach loops. On one specific page, I am facing issues when trying to retrieve data from ...

Sending a picture through AJAX using the camera feature of p5.js

Currently, I am exploring the camera functionality of p5.js to capture video. However, I am facing a challenge when trying to upload these images to a server using ajax. I am unsure about how to convert a p5.js Image object into a suitable format for trans ...

Validating Data in Laravel with a Single Rule

I just started working with Laravel and our system has multiple forms on one page to enter a single bitcoin wallet in each input field. Currently, users can enter the same wallet information in all inputs, but this is not correct. Is there a way to only al ...

Encountering the error "Compiled with issues" upon starting the react server

Hello everyone, I'm currently in the process of upgrading from React 16 to 18. At the moment, I am using Material UI 4.11 but will be upgrading to V5 soon. However, when I start using 'npm start' after upgrading React, I encounter the errors ...

Is there continued communication between the client browser and my front end React server post initial loading?

I developed my APP with React on the front end and Node on the back end. When a user accesses the URL where my React front end is hosted, the server will send the application to the user's browser. After this initial interaction, does the user' ...

Is the 'previousState' variable in React able to be changed?

After searching for an answer to this question for quite some time, I have decided to just ask it: When passing a function as the first parameter to this.setState, is previousState mutable? https://i.stack.imgur.com/vcnyv.png The documentation mentions ...

Issue: Incorrect parameters for executing the MySQL statement

Currently, I am working on a nodeJs project and utilizing the npm package mysql2 for connecting to a MySQL database. This is how my MySql Configuration looks like:- let mysql = MYSQL.createConnection({ host: `${config.mysql.host}`, user: `${config.mys ...

If no content is present in a cell of an HTML table, alter the row

I am attempting to create a CSS table that changes the row color if any cell in the row is empty. Here's what I have so far: <style type="text/css"> td:empty { background-color: red; } </style> Is there a way to change th ...

After making 5 Ajax get requests, there is no response being received

Currently, I'm facing an issue when trying to retrieve information from the MongoDB server to the frontend using an AJAX GET request. Everything works smoothly until I attempt to call the JavaScript function multiple times. Strangely, if I call the fu ...

What are the steps to resolve the issue of date picker text overlapping in a view?

I am facing an issue with a Modal that contains a date picker followed by 2 buttons. Whenever I try to select a date from the calendar, the buttons get hidden. Here is a snapshot of the problem: https://i.sstatic.net/Ec0rp.png Below is the code snippet I ...