@emccorson

Thank you very much, I tried and found that, I should change the ion names and the icons will appear.

But the example in Onsen Playground is wrong, it is funny.

I found out the reason, because I put the '<ons-toast> inside <ons-page>, put outside ons-page, everything become normal.

I found that using components is differ from using notifications. Using notifications is normal, but using components, toast will fall down from the bottom of the ons-toolbar, and rising from the top of the ons-bottom-toolbar.

You can check by the following code or check the example here.

HTML:

<ons-page>
    <ons-toolbar>
        <div class="center">Title</div>
    </ons-toolbar>
  
    <ons-list>
        <ons-list-header>Components</ons-list-header>  
        <ons-list-item tappable modifier="longdivider" onclick="toastDown.toggle()">
            <div class="center">
                Toast Down from the bottom of the ons-tootlbar
            </div>
        </ons-list-item>      
        <ons-list-item tappable modifier="longdivider" onclick="toastUp.toggle()">
            <div class="center">
                Toast Up from the bottom of the ons-bottom-tootlbar
            </div>
        </ons-list-item>  
     <ons-list-header>Notifcations</ons-list-header>     
        <ons-list-item tappable modifier="longdivider" onclick="showToastDown()">
            <div class="center">
                Toast Down
            </div>
        </ons-list-item>      
         <ons-list-item tappable modifier="longdivider" onclick="showToastUp()">
            <div class="center">
                Toast Up
            </div>
        </ons-list-item>        
     
    </ons-list>
    <ons-bottom-toolbar>
    </ons-bottom-toolbar>
  
    <ons-toast id="toastUp" animation="ascend">
        FABs down!
        <button onclick="toastUp.hide()">ok</button>
    </ons-toast>
     <ons-toast id="toastDown" animation="fall">
        FABs down!
        <button onclick="toastDown.hide()">ok</button>
    </ons-toast> 
</ons-page>

JS:

var showToastDown = function() {
    ons.notification.toast('Toast!', {
        buttonLabel: 'Dismiss', 
        animation: 'fall', 
        timeout: 2000
    });
};

var showToastUp = function() {
    ons.notification.toast('Toast!', {
        buttonLabel: 'Dismiss', 
        animation: 'ascend', 
        timeout: 2000
    });
};

JavaCcript templating is very wonderful, easy to read, and code look more simple.

e.g.

<script id="list-item" type="text/template">
  <ons-list-item modifier='longdivider chevron tappable'>"
    <div class='left'>
      <img class="list-item__thumbnail" src = '{{phone}}'/>
    </div>  
    <div class='center'>{{name}}</div>
  </ons-list-item> 
</script>

https://jonsuh.com/blog/javascript-templating-without-a-library/

But it only works in single page onsen HTML, and doesn’t work in multi- onsen HTML.

So what I can do is change script to div and make it hidden.

<div class="hidden" id="list-item" type="text/template">
  <ons-list-item modifier='longdivider chevron tappable'>"
    <div class='left'>
      <img class="list-item__thumbnail" src = '{{phone}}'/>
    </div>  
    <div class='center'>{{name}}</div>
  </ons-list-item> 
</div>
<style>
   .hidden { display:none; }
</style>

I still want to use script instead of div hidden, is there any better solution?

It works in version 2.10.6, but not work on version 2.10.8 to 2.10.10

I found Ionicons disappeared, even disappeared
from the samples in the Onsen playground.