info-button

info-button.component.html

<mat-icon class="info-icon" (click)="toggleInfoByClick()" color="primary">info</mat-icon>

info-button.component.scss

.info-icon {
  cursor: pointer;
  font-size: 16px;
  margin-left: 8px;
  height: 16px;
}

info-button.component.ts

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

@Component({
  selector: 'app-info-button',
  templateUrl: './info-button.component.html',
  styleUrls: ['./info-button.component.scss'],
})
export class InfoButtonComponent {
  @Output() infoButtonClicked = new EventEmitter<void>();

  toggleInfoByClick(): void {
    this.infoButtonClicked.emit();
  }
}