What is the best way to create a hover effect for Material Icons?

Having issues with Material Icon not displaying the specified changes when using CSS modules in my project

import SettingsIcon from "@mui/icons-material/Settings";
import css from "./LandingPage.module.css";

<SettingsIcon className={css.settingsButton}/>

LandingPage.module.css file

.settingsButton{
    position: absolute;
    right: 20;
    top: 20;
    display: block;
    height: 70px;
    width: 70px;
    transition: transform .7s ease-in-out;
    color: white;
}
.settingsButton:hover{
transform: rotate(360deg);
}
htmlcssreactjsmaterial-uimaterial-icons

Answer №1

The issue arises from the default transition property of .MuiSvgIcon-root being more specific than your own.

To resolve this, you must elevate the priority of your CSS within your module.css file using the :global notation as demonstrated below:

:global(.App) .settingsButton {
  position: absolute;
  right: 20;
  top: 20;
  display: block;
  height: 70px;
  width: 70px;
  transition: transform 0.7s ease-in-out;
  color: white;
}
:global(.App) .settingsButton:hover {
  transform: rotate(360deg);
}

Please note that in the code above, .App represents my app. If your app does not have this class, you can wrap your icon with a different custom div using a unique className instead of .App.

For a practical demonstration of this solution, refer to this StackBlitz link.

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

The dropdown in the HTML tbody section is displayed above the thead

I'm experiencing an issue where my tbody element is appearing above the thead section in my table. I've been unable to identify the cause of this problem. <table id="myTable" class="table table-inverse table-hover"> <thead id = "h ...

phphtml

What is the best way to align two tables next to each other in a React application with Material UI components?

currently appears as I am trying to display two tables side by side in React using Material UI. Below is the structure of the table: function BasicTable() { return ( <TableContainer component={Paper}> <Table sx={{ minWidth: 300 }} aria-lab ...

reactjsmaterial-uireact-material-ui-form-validator

Node Express app issue: Only one page is not having CSS applied

I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...

cssnode.jsexpresshandlebars.js

When I click the back button on my mouse in React, it returns JSON data instead of HTML and CSS

I am working on a web application with two pages: a menu and orders. When I navigate from the orders page to the menu page and click the back button, I receive JSON data instead of the HTML page. The data loads correctly, but the page does not display the ...

javascriptreactjsreact-router

Optimizing the selection and deselection of checkboxes using JQuery with X checkboxes in mind

If I have a set of 'X' checkboxes (any input elements) in a form and "M" option selection indexes ("M" less than or equal to "X"), how can I efficiently select the "M" option indexes/values and deselect the remaining checkboxes? For example, if ...

jqueryhtmlcheckboxunobtrusive-javascript

transforming unicode into regular characters prior to being presented on a webpage

I am currently utilizing the openinviter class to import contacts from emails. Sadly, it is showing Unicodes of non-English characters, like Polish, such as u0117 (and similar code types), instead of regular characters. Is there a way to convert these Unic ...

phphtmlunicode

Picture emerges from the lineup

My dilemma involves repositioning an image within a row > col-md-6. To address this, I devised two classes - .pos1 and .pos2 .pos1 { position: relative; } .pos2 { position: absolute; right: 0px; } However, when applying these classes, the ...

htmlcsstwitter-bootstrap-3

Styling an unordered list with CSS in HTML is a powerful

I am working with an unordered list where each list element contains two spans: span A and span B. My goal is to style these elements so that they are displayed horizontally on the screen, with span A above span B in each set. Example: spanAItem1 sp ...

htmlcss

Tips for combining multiple fields into a single variable in PHP

When I click the submit button, the image source does not show any result but the image color is displayed. Any help would be greatly appreciated. <div class="form-group"> <input type="file" name="images[source][]" class="form-control input-l ...

phphtmlmysql

Gather data from various HTML elements with JavaScript when submitting a form

How can I extract values from HTML elements and send them for processing through a form? I'm attempting to compile a menu item list with the individual items' structure in place, but I'm struggling to figure out how to fetch the values upon ...

javascripthtmlcss

Duration of Animated Text

Despite trying various methods, I'm struggling to adjust the duration of my animations. I want each animated text to be displayed for 2-3 seconds, as they are currently moving too quickly. How can I resolve this issue? Please note that the specific pl ...

csscss-animations

conceal the .card-body element if the children have the CSS property "display:none"

My challenge involves managing two collapsible cards on a webpage. I am looking for a solution where the .card-body will have its display set to none when there are no inner divs to show in the card upon clicking a letter in the pagination. Otherwise, the ...

javascriptjqueryhtmlbootstrap-4

Modify anchor link color in a one-page website by using Jquery to detect scroll position changes when reaching different page sections

Each if statement contains specific numbers to change the text color of the visited/current/active anchor link. The height of the page is dependent on its width. How can this be resolved? Apologies if my explanation is confusing, English isn't my stro ...

jqueryhtmlcss

Modify the data-prefix attribute of the React-Table Header on the fly (Limited to Cell components)

My goal is to dynamically alter the data-prefix of an icon from far to fas upon clicking a button. This modification will transform the folder icon into a dimmed version, indicating that a process is currently in progress. Upon clicking the button, I exec ...

reactjsreact-table

Switching an image when hovering over another div - a simple tutorial

Currently, I am in the process of creating a product page for metal address numbers on a website. These numbers are available in four distinct colors: gold, chrome, black, and brown. My goal is to enable users to hover over a specific color div, prompting ...

jqueryhtmlimage

How can I add divs to an HTML page with a Javascript animated background?

I am currently facing an issue with my JavaScript animated background, consisting of just 3 pictures. I am trying to display some Div elements on it with content inside. Here is the code snippet I have right now: In my CSS file, I have defined styles for ...

javascriptcsshtml

Tips for making a TextField span the entire width of a grid container

Why is the TextField component not displaying at full width, while the Paper component is displayed at full width? Does anyone have any insights on this issue? <Grid container spacing={2} className={classes.grid}> <Grid item xs={12} md={6}> ...

reactjsmaterial-uitextfield

Error: The function changeChecked is not recognized

I am attempting to pass the function changeChecked as a prop from the parent component to this child component in order to capture the id of the input element. However, I am encountering an error in the process. Below, I have provided the code for both the ...

node.jsreactjsfunctionreact-hooksstate

Nested foreach loops interacting with one another

I am attempting to execute multiple nested foreach loops and stop at 12 iterations, however the current code I have is not functioning as expected. While it displays the desired output, there seems to be an issue where only the first image in each director ...

phphtml

The getJSON API functions properly on a local machine but encounters issues when deployed on a

I have a vision to create a web application that can display the weather of any city based on user input. I've divided my project into three files - index.html for collecting user input, index2.html for retrieving and displaying the data, and a CSS fi ...

javascripthtmlcssjsonwebserver