Changing the color of a customized icon component upon hovering-CodePudding

Using Angular, I have created an icon component, which allows for attributes size and color to be set. The following HTML tag creates an icon:

<my-icon size='medium' color='primary-dark'>person</my-icon>

This component is essentially just a wrapper of the material-icons tag. The attributes size and color simply add a CSS class to the material-icons tag.

Now, I am using this icon component in one of my parent components. When hovering above this icon, I want to change its color. For this purpose, I have just created some SCSS in my parent component:

my-icon {
  &:hover {
    color: blue;
  }
}

I have also tried adding an ::ng-deep in front of my-icon. However, the color doesn't change upon hovering above the icon. Changing the opacity instead of the color works.

Apparently, my parent cannot change the color of my icon. I am not sure why. Taking a look at the browser console simply shows that the icon component has a CSS class connected to it, which represents the color set by the color attribute.

Anyways: Can somebody explain this behavior to me?

CodePudding user response：

You can apply hover style from css to that class For more reference: https://www.w3schools.com/csSref/sel_hover.asp

CodePudding user response：

Your CSS syntax is not valid: https://codebeautify.org/cssvalidate/y22780750

Correct syntax:

styles.css

my-icon > mat-icon:hover {
  color: blue;
}

.green {
  color: green;
}

.medium {
  font-size: 50px !important;
}

.large {
  font-size: 100px !important;
}

Do note, that for size font-size I needed to use !important to overwrite material defaults.

If you use the !important rule, it will override ALL previous styling rules for that specific property on that element! https://www.w3schools.com/css/css_important.asp

Parent html:

<my-icon [size]="'medium'" [color]="'green'" [name]="'person'"></my-icon>

For @Input binding we use brackets [] though it will work without too, just will be more understandable that its a binding. Probably will avoid some unnecessary warnings too from TS or linters.

MyIconComponent:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-icon',
  template: `<mat-icon [ngClass]="[size, color]" 
  aria-label="Example home icon">person</mat-icon>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class MyIconComponent {
  @Input() size: string;
  @Input() color: string;
}

So when you are saying my-icon:hover { color: blue;} (<- this one is valid syntax) it means my-icon should be blue on hover. Ok fine. But the the children of my-icon, the mat-icon's, are still going to be green. my-icon won't care if it's color should be blue, what should be blue exactly, it doesn't know on what the color should be applied on.

However if you did for example my-icon :hover { background: blue !important; } then something would happen with my-icon because it does have a background (you can try this with the demo).

Using my-icon > mat-icon we target children of my-icon and only mat-icon's and their color will be blue on :hover, since mat-icons know what to do with property color - so, they will change their color on hover.

Working example: https://stackblitz.com/edit/angular-ivy-bqwdqu?file=src/app/app.component.html