如何在ionic3中的标签图标上添加一个点？

<ion-icon name="home" id="home-icon"></ion-icon>

import { Component, ViewChild } from '@angular/core';
import { IonIcon } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('home-icon') homeIcon: IonIcon;

  // 其他组件代码...
}

import { Component, ViewChild, Renderer2 } from '@angular/core';
import { IonIcon } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('home-icon') homeIcon: IonIcon;

  constructor(private renderer: Renderer2) {}

  addDot() {
    const iconElement = this.homeIcon.nativeElement;
    this.renderer.addClass(iconElement, 'dot');
  }

  // 其他组件代码...
}

.dot::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
}

<button ion-button (click)="addDot()">添加点</button>