I have implemented two buttons in my Angular application, with which the user can change the displayed language. Now, instead of the two buttons with "German" & "English", I want to use two icons with the respective country flag. First I tried it with the "Mat-Icons", unfortunately there are no suitable icons for my use case. Therefore I downloaded two .png files with the respective country flags from Flaticon, saved them in /assets/icons and would now like to integrate these instead of the mat icons. Unfortunately, I just can't get this to work at all and would therefore appreciate some help - thanks!

<button mat-raised-button (click)="useLanguage('de')">German</button> 

<button mat-button (click)="useLanguage('de')"><mat-icon>...</mat-icon></button>
                                

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Working stackblitz example here

Use your images this way

<button class="icon-button" (click)="useLanguage('de')">
  <img
    class="icon"
    src="assets/your-path-to-icon"
  />
</button>

And these custom styles in global styles -

.icon-button{
  background: none;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.icon-button .icon {
  width: 28px;
}