Optimal Method for altering Material UI Icon's height

Placing two icons from Material UI Icons side by side in a row reveals that although their heights are both set to 24px, the actual height of the paths within each icon differs - one being 18px and the other being 22px. This inconsistency in height is not visually appealing.

Is there a way to adjust the height of the icons so that it reflects the desired "user-facing" height?

import {
  Delete,
  FileCopy
} from "@material-ui/icons";

...

<Box display="flex">
  <FileCopy onClick={handleCopy} />
  <Delete onClick={handleDelete} />
</Box>

Previous attempts at setting the SVG height resulted in undesirable vertical alignment issues...

cssreactjsmaterial-ui

Answer №1

The symbols come with a property called fontSize - for example, 

<HomeIcon fontSize="large" />
.

You can also define it directly - 

<DeleteIcon style={{fontSize: "10px"}}/>
.

Answer №2

To provide a proper answer to this query, we require more information about the components and the data passed and returned by them.

If we assume that the <FileCopy /> component is generating an SVG element that accepts valid SVG properties, the recommended method to adjust its size would be by specifying height and width attributes.

<FileCopy height='48' width='48' />

Another approach to consider is that the SVGs likely have a viewBox which serves as a canvas. Modifying the height and width properties of the SVG will alter the size of the viewBox/canvas, causing the icons/paths inside it to scale accordingly.

<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height='24' width='24'><circle fill="#FF4500" cx="10" cy="10" r="10"/><path fill="#FFF" d="M16.67 10a1.46 1.46 0 00-2.47-1 7.12 7.12 0 00-3.85-1.23L11 4.65l2.14.45a1 1 0 10.13-.61L10.82 4a.31.31 0 00-.37.24l-.74 3.47a7.14 7.14 0 00-3.9 1.23 1.46 1.46 0 10-1.61 2.39 2.87 2.87 0 000 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 000-.44 1.46 1.46 0 00.81-1.33zm-10 1a1 1 0 111 1 1 1 0 01-1-1zm5.81 2.75a3.84 3.84 0 01-2.47.77 3.84 3.84 0 01-2.47-.77.27.27 0 01.38-.38A3.27 3.27 0 0010 14a3.28 3.28 0 002.09-.61.27.27 0 11.39.4zm-.18-1.71a1 1 0 111-1 1 1 0 01-1.01 1.04z"/></svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height='48' width='48'><circle fill="#FF4500" cx="10" cy="10" r="10"/><path fill="#FFF" d="M16.67 10a1.46 1.46 0 00-2.47-1 7.12 7.12 0 00-3.85-1.23L11 4.65l2.14.45a1 1 0 10.13-.61L10.82 4a.31.31 0 00-.37.24l-.74 3.47a7.14 7.14 0 00-3.9 1.23 1.46 1.46 0 10-1.61 2.39 2.87 2.87 0 000 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 000-.44 1.46 1.46 0 00.81-1.33zm-10 1a1 1 0 111 1 1 1 0 01-1-1zm5.81 2.75a3.84 3.84 0 01-2.47.77 3.84 3.84 0 01-2.47-.77.27.27 0 01.38-.38A3.27 3.27 0 0010 14a3.28 3.28 0 002.09-.61.27.27 0 11.39.4zm-.18-1.71a1 1 0 111-1 1 1 0 01-1.01 1.04z"/></svg>
</div>

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

What is the best way to center-align my list within the designated area?

I need help centering a two column list on my webpage. It's currently justified to the left. How can I adjust it? To see what I'm working with, check out my jsfiddle: http://jsfiddle.net/huskydawgs/c2yqmfzt/5/ <p> A banana is an edible fr ...

htmlcss

Having difficulty modifying styles within the React Material-UI app bar component

I created a unique component and tried to implement it in AppBar, but the styles are not being overridden. I utilized the makeStyles hook which works perfectly fine outside of the AppBar, however, within the AppBar and ToolBar, I am encountering difficulti ...

javascriptreactjsmaterial-ui

What is the trick to accessing an object's key and value when you are unsure of the object's

Currently, I am in the process of constructing a React component that is designed to receive an array of objects. However, I have encountered a question: Is there a way for me to retrieve both the key and value of an object within the map function without ...

reactjstypescript

Can the <container> block be positioned beneath the <header> block?

header { background: blue; color: white; width: 100%; } .container { background: green; text-align: center; width: 100%; height: 100px; transform: skew(0, -10deg); color: white; position: relative; top: 55px; } .container .home{ p ...

htmlcss

What might be causing my direct descendant selector to not work as expected?

I'm struggling with my direct descendant selector. Let's analyze a straightforward example: .myDiv > table tr:first-child td { font-weight: bold; text-align: center; } <div class="myDiv"> <table style="width:100%"> < ...

htmlcsscss-selectorshtml-table

Text alignment from the lower edge

Imagine having a title inside an image, positioned near the bottom with a negative margin-top. The issue arises when the text orientation expands from top to bottom as more content is added. Is there a way to reverse this, so that the text div grows toward ...

htmlcss

Display a pop-up directly below the specific row in the table

I am working on creating a table where clicking on a row will trigger a popup window to appear right below that specific row. Currently, the popup is displaying under the entire table instead of beneath the clicked row. How can I adjust my Angular and Bo ...

angularcssbootstrap-4

Creating a clickable image in a React component with code

Within a React component, I want to achieve the equivalent of the following src code found in Laravel Blade: data-src="data:image/;base64,{{ base64_encode(@file_get_contents($auction->thumbnail_link)) }}" What is the best way to do this in a ...

reactjslaravelcomponents

Creating a manual chunk in Vite (Rollup) to optimize chunk size by isolating Material UI

Has anyone experimented with using Vite for bundling their MUI application? I was taken aback by the size of my vendor chunk (1.1MB) generated by Vite/Rollup. I've devised a configuration below that segregates MUI packages into their own chunk: import ...

reactjsmaterial-uirollupvite

What is the best method for flipping the sequence of elements in media queries?

I am facing an issue with two divs, left and right, on my webpage. When the screen size is less than 500px, I want the left div to move to the bottom and the right div to move to the top. Essentially, I need to swap the positions of these divs in the DOM. ...

htmlcssflexbox

Module '../../third_party/github.com/chalk/supports-color' not found in the directory

Within my tutoring-frontend-main project folder There is a file named package.json { "name": "app-frontend", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "n ...

javascriptnode.jsreactjsangularangularjs

Steps for styling an AngularJS Popup:1. Determine the desired appearance for

I have some code that displays a popup when clicked, along with its automatically generated CSS. I want to be able to make changes to the CSS by adding IDs or classes to it. How can I assign IDs or classes to this element so that I can easily target them f ...

javascriptcssangularjspopup

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

javascripthtmlcssformsobject

Creating a Vibrant Progress Bar with Multiple Colors: A Step-by-Step Guide

I'm still getting the hang of things, so I apologize if my question isn't perfectly clear. What I'm trying to do is create a dynamic progress bar with multiple colors that animates upon loading the page. I've seen some examples similar ...

javascriptjqueryhtmlcssprogress-bar

React 17 Form not registering the final digit during onChange event

I am currently experiencing an issue with a form that includes an input field of type "number." When I enter a value, the last number seems to be skipped. For example: If I input 99 into the box, only 9 is saved. Similarly, when typing in 2523, only 252 ...

javascriptnode.jsreactjsformsexpress

What is the best way to add a "load more" button in a React application?

After writing this code, I am receiving a list of 12 objects that are being mapped. class PokemonList extends React.Component{ constructor(props){ super(props); this.state = { pokemonList: [], apiTemplateUrl: "h ...

jsonreactjsjsx

Circular graphs displaying percentages at their center, illustrating the distribution of checked checkboxes across various categories

Looking for a JavaScript script that displays results in the form of circles with percentage values at their centers, based on the number of checkboxes checked in different categories. The circle radius should be determined by the percentage values - for e ...

javascriptjquerycss

How to Add Borders to Components in Material UI Using React

Is there a way to add a border only if elevation is 0 in Material-UI within React? The current code snippet applies a border to all cards by default. const customTheme = createTheme({ components: { MuiCard: { styleOverrides: { root: { ...

reactjsmaterial-ui

The loading icon appears stuck and does not rotate on iOS version 15.3 and above, but functions properly on versions below 15.3

The loading icon does not spin on iOS versions > 15.3 or 16.1, but it works perfectly fine on lower iOS versions for iPhone and iPad, as well as on Android browsers. Below is the CSS code for reference. I've attempted using webkit for Safari and a ...

cssiosiphonecss-animationscss-transforms

Encountering an issue in Next.js where the state of one component cannot be sent to another due to the error message: "Uncaught TypeError: setSelectedTag is not a function at

I recently utilized the useState hook to create a state in my project. I encountered an issue when attempting to pass the setState function as a prop to a child component. Upon using this function in a button's 'onclick' event, an error surf ...

reactjsnext.jsreact-hooksmdxnext.js13