Tips for modifying the size and color of a Material UI icon

Utilizing the CircularProgress-Icon component from Material UI, I'm interested in modifying the size and color attributes. Below is the code snippet in question:

  1. size
  2. color

The snippet of code in question appears as follows:

const useStyles = makeStyles({
  button: {
    color: 'white',
    fontSize: 15,
  },
});

<CircularProgress className={classes.button} />

The color attribute functions as expected, but I'm facing issues with resizing. I've attempted using "size: 15", as well as "height: 15, width: 15", but to no avail. Any insights on what may be causing this issue? Thank you in advance!

javascriptmaterial-ui

Answer №1

I attempted to adjust the size without success, so I approached it in a different way.

const styles = {
  activity: { height: 100, width: 100 },
};

const LoadingIndicator = (props) => {
  return <CircularProgress style={styles.activity} {...props} />;
};

NEW

This method is effective

<CircularProgress {...props} size={30} />

Answer №2

If you're looking for a workaround, one option is to enclose your circularprogress within a div that has a fixed height/width. Here's an example:

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    "& > * + *": {
      marginLeft: theme.spacing(2)
    },
    width: 300,
    height: 300
  }
}));

export default function CircularIndeterminate() {
  const [parentSize, setParentSize] = useState(0);
  const parentRef = useRef(null);

  useEffect(() => {
    const { clientHeight, clientWidth } = parentRef.current;

    setParentSize(Math.min(clientHeight, clientWidth));
  }, []);
  const classes = useStyles();

  return (
    <div className={classes.root} ref={parentRef}>
      <CircularProgress size={0.8 * parentSize} />
    </div>
  );
}

Feel free to experiment with it here.

Answer №3

<HouseIcon size="small" />
<HouseIcon />
<HouseIcon size="large" />
<HouseIcon sx={{ size: 40 }} />

Link: https://mui.com/material-ui/icons/#size

<HouseIcon color="primary" />
<HouseIcon color="secondary" />
<HouseIcon color="success" />
<HouseIcon color="action" />
<HouseIcon color="disabled" />
<HouseIcon sx={{ color: pink[500] }} />

Link: https://mui.com/material-ui/icons/#color

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

1. Common obstacles in the functionality of data binding2. Constraints

Working on a basic controller to perform some calculations, which is a simplified version of a more complex project. The issue I'm facing is that the result displayed in the HTML gets recalculated every time there's a change, but when calculating ...

javascriptangularjsangular-data

Is it possible to return true to asp.net OnClientClick following an Ajax request? Alternatively, is there another method that can be used?

I am currently implementing an Ajax call to verify if a user is logged in. If the user is not logged in, I want to display a login dialog; otherwise, I need OnClientClick to return true so that the form can be submitted. I am considering using a global var ...

javascriptasp.netajax

The Power of AngularJS Directives in Harnessing jQuery DOM Event Bindings

I have developed a new directive and have some doubts about the binding syntax like element.bind("click", function(){}). Every time the link function of the directive is called, it creates a duplicate binding. What is the best Angular approach to handle th ...

javascriptjqueryangularjs

Tips for handling Promise.all and waiting for all promises to resolve in an async function in Express JS

I'm relatively new to JavaScript and especially asynchronous programming. My current project involves creating an Express+React application that shows a GitHub user's information, including a few repositories with the latest 5 commits for each. ...

javascriptreactjs

Showing chosen checkbox information using jQuery ajax

When a user enters more than 3 characters into a text box for live search, results are displayed from the database via an AJAX response as checkboxes with names. I want selected checkboxes to display in a separate div below so users can search multiple dat ...

javascriptphpjqueryajax

Transitioning from curl to jQuery's $.ajax() method

Recently, I encountered a challenge while trying to switch the curl code used for an API known as TextRazor to jquery's AJAX due to certain limitations on the platform. Despite exploring various solutions suggested by the community in response to simi ...

javascriptphpjqueryajaxcurl

Issues with tabbed navigation functionality in jQuery

I'm encountering some difficulties with the tabbed navigation I created using CSS. Essentially, when a button is clicked, it should remove the hidden class from one div and add it to the other. However, what actually happens is that the div which sho ...

javascriptjqueryhtml

When selecting a MenuItem, only a ReactOwner has the ability to add a ref using addComponentAsRefTo(...)

I'm currently working on a basic component that looks like this: class App extends React.Component<{}, {}> { constructor() { super(); } render() { return ( <MuiThemeProvider muiTheme={muiTheme}> <div> ...

reactjstypescriptmaterial-ui

Extract keys from the string

Is there a better way to extract keys from a string? const {Builder, By, Key, until} = require('selenium-webdriver'); ... const obj = {val: 'Key.SPACE'} if(obj.val.startsWith('Key.'))obj.val = eval(obj.val); (...).sendKeys(obj ...

javascriptseleniumselenium-webdriverselenium-chromedriver

Could anyone clarify the concept of how a function is able to be equivalent to zero?

function checkForSpecialCharacters(text) { var specialChars = [";", "!", ".", "?", ",", "-"]; for(var i = 0; i < specialChars.length; i++) { if(text.indexOf(specialChars[i]) !== -1) { return true; } } ...

javascript

What is the best way to customize the CSS of the Skype contact me button?

I am struggling with customizing the Skype contact me button. The standard Skype button has a margin of 24px and vertical-align set to -30px. I have tried removing these styles but have had no success. Here is the code snippet I am working with: Skype ...

javascripthtmlcsscss-selectorsskypedeveloper

Enhancements to managing universal configuration object across the entire application

My current project involves working on an application with multiple products. To streamline product-specific configuration and eliminate the need for excessive if-else statements, I am looking to implement product-specific config keys that are consistently ...

javascripttypescriptsingle-page-application

Unable to retrieve the saved user from the Express.js session

Below is the code in question: app.post('/api/command', function (req, res, next) { var clientCommand = req.body.command; console.log("ClientCommand: ", clientCommand); if (!req.session.step || req.session.step === EMAIL) { ...

javascriptnode.jsexpress

What happens when the `.push` command runs the "Undefined" function in jQuery - is it possible to execute a number instead?

My script is quite simple - I'm trying to use the push method to add the result of a function called dNumber into the variable named pattern. However, every time I try this, the result is always "undefined". Oddly enough, when I try pushing just plain ...

javascriptjqueryarrays

"Enhance your table by adding a new row using user input in

I am just starting out with JavaScript and facing a challenge. I have created an HTML form to gather user input, with a submit button. My goal is to take the input values and add them as a new row in a table when the form is submitted. I have been strugg ...

javascriptjquerytablerow

Retrieve the overall number of Formik errors for a specific field array

In the given Yup validation setup below, there is a nested Formik FieldArray: parentLevel: Yup.array().of( Yup.object({ childrenLevel: Yup.array().of( Yup.object({ childName: Yup.string().required('Name is required') ...

javascriptreactjsformikyup

Conceal the choice if its value matches that of another option

My goal is to create a code that will hide an <option> if its value matches the value of the first option (which is retrieved dynamically with PHP). Here's the initial code snippet: <select onChange="this.form.submit()" name="cart[<?php e ...

javascriptjqueryhtmllistboxhtml-select

Having trouble getting an AjaxBeginForm to function properly within a JQuery script on a PartialView

Within the main controller view, we bring in the partial view utilizing the following code: @Html.Partial("MapPartial", Model) Within the Partial View, I aim to display a map. Currently, there is an Ajax beginform with a submit button that ...

javascriptjqueryajaxasp.net-mvc

Clickable Slider Picture

I'm having a minor issue with a jQuery script that slides images on my website. The script itself is functioning properly, but I am trying to add links to each image. I've attempted placing <a href> and </a> tags around the <img> ...

javascriptjqueryhtml

utilizing count to pre-determine record allocation

From my understanding, pre-allocating a record has the potential to enhance performance, particularly when dealing with a large volume of records in a time series dataset. updateRefLog = function(_ref,year,month,day){ var id = _ref,"|"+year+"|"+month; ...

javascriptnode.jsmongodbmongodb-querypre-allocation