Почему мои иконки показывают дубликаты изображения?

Question

Я пытаюсь создать социальные иконки в нижней части моей страницы, но на них отображаются несколько одинаковых изображений.

Вот мой код:

<div class="social">
    <span *ngFor="let socialLink of footerContent.socialLinks">
      <a mat-flat-button class="{{socialLink.socialMediaService}}-icon" href={{socialLink.url}} title={{socialLink.socialMediaService}} target={{socialLink.linktarget}}>
        <mat-icon></mat-icon>
      </a>
    </span>
  </div>

Это то, чтоизображение выглядит как

Как мне сделать так, чтобы оно показывало только одно идеально подходящее изображение на иконку?

Answer 1

Было бы сложно дать точное решение без ссылки на ваш сайт.Но из рисунка кажется, что изображение дублируется, поскольку оно установлено в качестве фона, возможно, поле слишком велико, поэтому фон повторяется.Возможно, этот CSS может помочь:

.social a {
  backgrouind-repeat:no-repeat;
}

Или этот:

.social a {
  max-width:20px;
}