Adjusting the size of MaterialUI SVG icon: a simple guide

Hey everyone, I'm having some trouble trying to make this MaterialUI icon larger.

I've attempted changes with the viewbox and inline styling, but no luck so far.

The current size of the icon isn't cutting it for me, I need it to be bigger.

I

const function App() {
  
  
 
  return (
    <>
    <div className="grid" >
    <div className="panel">
    <img style={{width:"200px", height:"200px", padding:"0"}} src={NI} alt="logo"></img>
    <div className="user">
   <div>
   <AccountBoxIcon
      viewBox="0 0 20 20"
      
     />

    </div>
   </div>



    </div>
    
    <div className="brand-dir">
    <header className="header">
      Brand Directory
    </header>
    <div className="App">
    <BrandTable />
    </div>

    </div>
   
    
    </div>
    
    </>
  );
}

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

]1]1

Answer №1

To adjust the size of the icon, simply use the font-size attribute in your css styling

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

Troubleshooting a JQuery accordion malfunction within a table

I am populating the data dynamically. However, the Accordion feature is not functioning correctly. JSFiddle link http://jsfiddle.net/aff4vL5g/360/ Please note: I am unable to modify the HTML structure. Current table Desired output The first accordio ...

The full-width header is generating a horizontal scrollbar

Why am I seeing horizontal scroll bars on Safari and Chrome when the header width is set to 100%? Here is the code snippet: window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 400 || doc ...

Slow mouse hover element highlighting in jQuery is causing issues

I'm currently working on creating a simple chrome extension that allows me to highlight an element when hovering over it with the mouse. I've been trying to implement a feature where the element is highlighted by adding a border shadow, but this ...

Two CSS borders of varying heights

Just wondering, can we achieve something similar to the style shown in the attachment using only CSS? <h3 style="border-bottom:1px solid #515151"><span style="border-bottom:3px solid #0066b3">HEADER</span></h3> ...

Corrupted PDF file producing distorted images

I recently created a well-designed HTML page that can be transformed into a PDF format. The HTML page displays correctly in the web browser. https://i.sstatic.net/D0DE8.png However, when I execute window.print(), the structure appears distorted. https:/ ...

Erase a set of characters with the press of the backspace key (JavaScript)

Within my textarea, I have lines that start with a number and a period: <textarea autoFocus id="text-area"wrap="hard" defaultValue ={this.state.textAreaVal} onKeyUp={this._editTextArea}/> For example: Line 1 Line 2 Line 3 I've created a ...

Is there a way to seamlessly roll the camera using a button in ThreeJS alongside TrackballControls without causing any conflicts?

When working with ThreeJS, I encountered an issue with rotating the camera using a button. Here is the code snippet I used: camera = new THREE.PerspectiveCamera(...) function roll(angle) { const quaternion = new THREE.Quaternion(); const lookat = ...

I am eager to run the code that I retrieved from the server. I have access to the code in my console and I desire for it to execute on the main browser page

Currently, I have a simple Google Chrome Extension that includes a button. By using AJAX, I am fetching a script from a server in my browser's console. Essentially, clicking on the extension reveals a button which, when clicked, fetches the script fro ...

I can't seem to get my SCSS files to load properly on GitHub HTML pages, and I

Just starting out in the world of programming and decided to showcase my portfolio site on GitHub. While my index page is displaying correctly, I'm encountering issues with some images and all of my SCSS files not showing up. Any assistance or guidanc ...

Crafting jQuery Plugins with Object-Oriented Programming

Curious about the latest techniques for creating jQuery Plugins? There are so many different methods out there, it's hard to know which one is most effective. Could you recommend any helpful resources or templates for developing jQuery Plugins using ...

Ways to loop through a collection of indexed elements

I am working with an array of indexed objects and my goal is to iterate through it in order to transform it into a new flattened array. Here is the initial array of objects: "attentionSchedules": [ { "room": "1", ...

The React Hook useEffect is triggering a warning about missing dependencies related to 'classes'. This issue involves the Material-ui styles and react-bootstrap-sweetalert

Upon encountering this warning: "React Hook useEffect has missing dependencies: 'classes.button' and 'classes.warning'.", it became clear that I needed to address the issue at hand. As per the recommended usage of react-bootstrap-sweeta ...

Creating a Singular Instance for Dynamically Loaded Module in Next.js

I'm currently working on creating a Singleton instance for a dynamically imported module in my Next.js app. However, the problem is that each time I call getInstance, it initializes a new instance instead of reusing the existing one. The following co ...

Ways to retrieve JSON data from an API's dynamic route for the getStaticPaths function

I have been attempting to retrieve JSON data from an API endpoint dynamically in order to use it with getStaticPaths in Next.js. Here is the code: pages/review/[id].js file export async function getStaticPaths() { const res = await fetch('http://l ...

The error message "npm ReferenceError: primordials is not defined (node.js)" indicates that the

I have encountered this issue multiple times and despite attempting various solutions, I am unable to resolve it. I am currently working with npm and facing the following error: evalmachine.<anonymous>:35 } = primordials; ^ ...

Should we be concerned about the ethics of running javascript that is fetched through an AJAX request?

Currently, I am working on updating an existing web application that allows for user administration and login capabilities. One of the features involves modifying a user's details through a dialog box, where the updated data is then sent to the server ...

Row in Bootstrap 3 fails to display correctly on medium-sized devices

Having trouble with divs of different sizes? I want a row that shows 3-column wide divs on medium & large screens and 6-column wide divs on small devices. <div class="container"> <div class="row"> <div class="service col-sm-6 col-md-3"& ...

The TypeScript factory class anticipates an intersection

In my code, I have a class factory called pickSomething that generates a specific type based on a key provided from a ClassMap: class A { keya = "a" as const; } class B { keyb = "b" as const; } type ClassMap = { a: A b: B } c ...

Having trouble with the functionality of my API in Express and MariaDB

I have successfully implemented an API using MariaDB and ExpressJS with a functioning get route... const getAllBills = async (req, res) => { try { const conn = await pool.getConnection(); const result = await conn.query('SELECT ...

Facing Issues with Angular 10 Routing on an HTTP Server Deployment?

After successfully running my Angular ver-10 Ecommerce Project locally with "ng serve", I encountered an issue when trying to publish it using "ng-build" and hosting it with "http-server". The problem arises when navigating from the Home Screen (e.g. Dashb ...