I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons.
Another problem I'm facing is that the icons shrink in size when hovered over. I've spent hours trying different solutions without success.
The icons should have a font size of 1.6rem and a border width of 4px. How can I resolve these issues?
To see the code in action, visit this CodeSandbox link.
Check out the code for the Header Component below:
import React from "react";
import "./Header.css";
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import SettingsIcon from "@mui/icons-material/Settings";
const Header = () => {
return (
<header className="header">
<div className="header__leftContainer">
<h1>Logo</h1>
</div>
<div className="header__rightContainer">
<SettingsIcon className="header__rightContainer__icons" />
<PowerSettingsNewIcon className="header__rightContainer__icons" />
</div>
</header>
);
};
export default Header;
Below is the corresponding CSS:
.header {
width: 100%;
background: yellow;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__leftContainer,
.header__rightContainer {
padding: 15px 40px;
}
.header__leftContainer h1 {
color: red;
}
.header__rightContainer svg {
font-size: 1.6rem;
margin: 0 15px;
cursor: pointer;
}
.header__rightContainer svg:last-child {
margin: 0 !important;
}
.header__rightContainer svg:hover {
border-bottom: 4px solid blue;
}