Onsen UI CSS Component Material Toolbar with Icons Last Updated : 28 Jun, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will see the Onsen UI CSS Component Material Toolbar with Icons. The toolbar is a horizontal bar with some toolbar items and icons. Onsen UI CSS Component Material Toolbar with Icons is used to create the material toolbar with icons using the below classes. Onsen UI CSS Component Material Toolbar with Icons Classes: toolbar--material: This class is used to create the material toolbar.toolbar--material__center: This class is used to create the material toolbar in the center.toolbar--material__left: This class is used to create the material toolbar on the left.toolbar--material__right: This class is used to create the material toolbar on the right.toolbar-button--material: This class is used to create the material toolbar button. Syntax: <div class="toolbar toolbar--material"> <div class="toolbar__left toolbar--material__left"> <span class="toolbar-button toolbar-button--material"> <i class="..."></i> </span> </div> ... </div> Example 1: The following example demonstrates the Onsen UI CSS Component Material Toolbar with Icons. HTML <!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Material Toolbar with Icons </strong> <br> <br> <div class="toolbar toolbar--material"> <div class="toolbar__left toolbar--material__left"> <span class="toolbar-button toolbar-button--material"> <i class="ion-ios-star"></i> </span> </div> <div class="toolbar__center toolbar--material__center"> Home </div> </div> </center> </body> </html> Output: Example 2: The following example demonstrates the Onsen UI CSS Component Material Toolbar with Icons. HTML <!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Material Toolbar with Icons </strong> <br> <br> <div class="toolbar toolbar--material"> <div class="toolbar__left toolbar--material__left"> <span class="toolbar-button toolbar-button--material"> <i class="ion-ios-star"></i> </span> </div> <div class="toolbar__center toolbar--material__center"> Home </div> <div class="toolbar__right toolbar--material__right"> <span class="toolbar-button toolbar-button--material"> <i class="zmdi zmdi-more-vert"></i> </span> <span class="toolbar-button toolbar-button--material"> <i class="zmdi zmdi-search"></i> </span> </div> </div> </center> </body> </html> Output: Reference: https://onsen.io/v2/api/css.html#toolbar-category Comment More infoAdvertise with us Next Article Onsen UI CSS Component Toolbar with Segment H harendra4373 Follow Improve Article Tags : Web Technologies CSS Onsen-UI Onsen-UI CSS-Components Similar Reads Onsen UI CSS Component Material Toolbar Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will see the Onsen UI CSS Component Material Toolbar. The toolbar is a horizontal bar with some toolb 2 min read Onsen UI CSS Component Material List with Icons Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Lists are used to store data or information on web pages in ordered or unordered form. Onsen UI CSS Component Material Li 2 min read Onsen UI CSS Component Material Tabbar (Icon only) Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components compatible with mobile and desktop. Onsen UI CSS Components are pre-built CSS components that may be used to create adaptive and attractive user interface layouts rapidly. 2 min read Onsen UI CSS Component Material List with Thumbnails Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Lists are used to store data or information on web pages in ordered or unordered form. Thumbnails are reduced-size images 2 min read Onsen UI CSS Component Toolbar with Segment Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will see the Onsen UI CSS Component Toolbar with Segment. The toolbar is a horizontal bar with some t 2 min read Onsen UI CSS Component Material Tabbar Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Onsen UI CSS Components are pre-built CSS components that may be used to rapidly create adaptive and attractive user inte 2 min read Like