I am using material icons, which I love, BTW. So, I've looked at the ligatures here: / and been using them.

But I have a screen where two of the icons aren't showing up and I can't figure it out. Here is my HTML:

<hello name="{{ name }}"></hello>
<p>
        <button mat-icon-button (click)="onUpClick()">
          <i class="material-icons">arrow upward</i>
        </button>
        <br/>
        <br/>
        <button mat-icon-button (click)="onDownClick()">
          <i class="material-icons">arrow downward</i>
        </button>
        <br/>
        <br/>
        <button mat-icon-button (click)="onClearClick()">
          <i class="material-icons">clear</i>
        </button>
        <br/>
        <br/>
        <button mat-icon-button (click)="onDeleteClick()">
          <i class="material-icons">delete</i>
        </button>
</p>

Clear and delete show up, but the upward and downward arrows don't show up. Here is the stackblitz: ponent.html

I've googled, but can't find issues where some of the icons show up, but not others.

I am using material icons, which I love, BTW. So, I've looked at the ligatures here: https://material.io/icons/ and been using them.

But I have a screen where two of the icons aren't showing up and I can't figure it out. Here is my HTML:

<hello name="{{ name }}"></hello>
<p>
        <button mat-icon-button (click)="onUpClick()">
          <i class="material-icons">arrow upward</i>
        </button>
        <br/>
        <br/>
        <button mat-icon-button (click)="onDownClick()">
          <i class="material-icons">arrow downward</i>
        </button>
        <br/>
        <br/>
        <button mat-icon-button (click)="onClearClick()">
          <i class="material-icons">clear</i>
        </button>
        <br/>
        <br/>
        <button mat-icon-button (click)="onDeleteClick()">
          <i class="material-icons">delete</i>
        </button>
</p>

Clear and delete show up, but the upward and downward arrows don't show up. Here is the stackblitz: https://stackblitz./edit/angular-hntkry?file=app%2Fapp.ponent.html

I've googled, but can't find issues where some of the icons show up, but not others.

• javascript
• angular
• icons
• angular-material2

Share Improve this question Follow asked Mar 20, 2018 at 10:53 ThomThom 15.1k3333 gold badges116116 silver badges199199 bronze badges 3

• 1 You need to use arrow_downward and arrow_upward. Check this for more clarification material.io/icons/#ic_arrow_upward – Luke P. Issac Commented Mar 20, 2018 at 11:04
• @LukeP.Issac Your ment was extremely helpful. I had never clicked on one of the icons before and it was helpful to learn to do that and it would show you the ligature to use. – Thom Commented Mar 23, 2018 at 15:08
• I was anticipating same so added the url here. :) – Luke P. Issac Commented Mar 24, 2018 at 6:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Arrow_upward and arrow_downward are spelled with _ between the words and not a blank space.

Have you linked Material+Icons font family? If no, Please do

<link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">

as well as @Mateusz Juruś is right, there should be _ instead of space.

Shouldn't it be <i class="material-icons">keyboard_arrow_down</i> instead of <i class="material-icons">arrow downward</i>