#SVG change on parent hover

14 messages · Page 1 of 1 (latest)

graceful copper
#

Does anyone have any experience with SVG icons in Angular please?

I have a component set up that is changing the icon depending on if it is hovered over or not. This is working as intended.

But sometimes these SVG icons are within a button for example and it only shows the hover when you hover over the SVG and not the parent, I have tried quite a few things to make it work but am quite lost.

If anyone could help point me in the right direction it would be appreciated, can PM code 🙂 thanks a lot

obsidian kettle
#

How are you defining the Hover ?

#

On what element.

graceful copper
# 
<div class="oello-icon-container">
  <div class="oello-icon-showing" [ngClass]="{ 'show-icon': valid, 'hide-icon': !valid }">
    <mat-icon
      [style.width]="size"
      style="height: auto"
      [style.margin]="margin"
      [svgIcon]="defaultIcon"
    ></mat-icon>
    <mat-icon
      [style.width]="size"
      style="height: auto"
      [style.margin]="margin"
      [svgIcon]="hoverIcon"
      [style.opacity]="hoverOpacity"
    ></mat-icon>
  </div>

  <mat-icon
    [ngClass]="{ 'show-icon': !valid, 'hide-icon': valid }"
    [style.width]="size"
    style="height: auto"
    [style.margin]="margin"
    [class.default-invalid]="defaultInvalid"
    [svgIcon]="invalidIcon"
  >
  </mat-icon>
</div>
<ng-content></ng-content>
#

it is set up like this at the minute, and the class file is like this:

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

@Component({
  selector: 'oello-icon',
  templateUrl: './icon.component.html',
  styleUrls: ['./icon.component.scss'],
  // encapsulation: ViewEncapsulation.None,
})
export class IconComponent implements OnInit {
  @Input() defaultIcon: string;
  @Input() hoverIcon: string;
  @Input() invalidIcon: string;
  @Input() size: string;
  @Input() margin: string;
  @Input() hoverOpacity: string;
  @Input() valid: boolean = true;
  @Input() disabled: boolean = false;

  defaultInvalid = false;

  ngOnInit(): void {
    if (!this.hoverIcon) {
      this.hoverIcon = this.defaultIcon;
    }
  }
}
#

I have never really worked with SVGs before, they can be a bit of a pain personally

obsidian kettle
#

You probably need to apply the Hover on the button.

#

In the case of a button

#

As you are saying u want to change the icon when u Hover the button.

#

You can also change the button so the icon takes up the entire width and height, but that might be more complicated

graceful copper
#

Yea I had tried to do the second with css, make it the SVG take up the same space as the button, it was some time ago but there was some issue.

That does make sense though, I will try to apply the hover property to the button element

graceful copper
#

Hmm, I am a bit lost unfortunately. The only way I can see to do it is to make a new component specific to buttons?

I think I maybe overcomplicating it?

obsidian kettle