rubyreactjsmaterial-uihyperstack

How to import Material-Icons in Hyperstack?

I try to use MaterialUi's <MenuIcon /> (like here https://material-ui.com/demos/app-bar/) in my Hyperstack-App but I get error below.

I installed @material-ui/icons with yarn, then I imported it in /app/javascript/packs/application.js like so

import * as Mic from '@material-ui/icons';
global.Mic = Mic;

then ran bin/webpack without errors.

Then I have something like this in a component:

   Mui.Toolbar() do

        if @menu == 'true'
          Mui.IconButton() do
            Mic.MenuIcon() {}
          end

...

But I get an error: 

Uncaught error: RuntimeError: could not import a react component named: Mic.MenuIcon

What am I doing wrong?

Thanks a lot for your help :)

Solution

  • I answered the questions as if you were using Semantic UI whereas you asked about Material UI, so I will leave the first answer there for anyone using Semantic and now answer for Material UI.

    The easiest approach for Icons is to import the Material Icon library in your layout HTML

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

    And then simply use them in Material UI like this:

    IconButton { Icon(fontSize: :large) { expand_icon } }

    If you are importing the whole Material UI library as one object (as per your question) then it would be:

    Mic.IconButton { Mic.Icon(fontSize: :large) { 'expand_more' } }

    Also, I think that @material-ui/icons' does not include any methods, but just the icons themselves, so you may be able to just import it and then use the Icons (as the resources will be bundled by Webpack)