I a using mdi-react package for Icons but when combining it with scss the "font-size" property dosen't work

Question

I am using mdi-react package and combining it with scss to define some styles but the font-size propert is not working. Everything else (like color property) is working.

I searched it all over the internet but can't find a solution so finally decided to write my first question on stackoverflow.

And I know I can just use size="8rem" in the icon component itself but I don't want to do that because of some reasons.

Here is my Home.js file:

import React from 'react';
import { Helmet } from 'react-helmet';
import CubeOutlineIcon from 'mdi-react/CubeOutlineIcon';
import { Link } from 'react-router-dom';

const home = () => (
    <>
        <Helmet><title>Quiz App - Home</title></Helmet>
        <div id="home">
            <section>
                <div>
                    <CubeOutlineIcon className="cube" />
                </div>
                <h1>Quiz App</h1>
                <div className="play-button-container">
                    <ul>
                        <li><Link to="/play/instructions">Play</Link></li>
                    </ul>
                </div>
                <div className="auth-container">
                    <Link to="/login">Login</Link>
                    <Link to="/register">Register</Link>
                </div>
            </section>
        </div>
    </>
);


export default home;

Here is my home.scss file:

#home {
background-image: url('../../assets/img/bg1.jpg');
background-size: cover;
background-position: center;
display: flex;
justify-content: space-around;
height: 100vh;

section {
    background-color: rgba($color: #000000, $alpha: 0.7);
    padding: $normal $md;
    height: 80%;
    width: 35%;
}

.cube {
    font-size: 8rem;  //Not working
    color: $orange;
}
}

Could you investigate a bit with dev tools and React dev tools to see if the resulting HTML and CSS is what you expect? If not, what is missing? That will help narrow down your investigation — David Bodow, Jun 17 '20 at 20:44

score 0 · Answer 1 · answered Jun 17 '20 at 18:51

0

According to docs, to change the size of the icon you should use the size property.

Check the following link:

https://github.com/levrik/mdi-react#usage

answered Jun 17 '20 at 18:51

Emanuele Scarabattoli

4,103
1
12
21

Yes, I mentioned it in the question that i know that size property can be used here.But I want to use sccs file in which I have pre-defined variables for every size,color,etc. – Kartik Jun 19 '20 at 06:21

score 0 · Accepted Answer · answered Jun 17 '20 at 18:58

0

That's because the .cube is actually assigned to an SVG element and that would require you to use height and width to change it's size. Font ain't gonna work hence.

(I'm assuming that you considered it to be a font-icon or so as the color property got applied to it, but it did so cos fill is set as currentColor, which uses the current text-color.)

answered Jun 17 '20 at 18:58

srik_sm

76
3

Hey Thanks a lot, using height and width in scss file solved the problem. – Kartik Jun 19 '20 at 06:23

I a using mdi-react package for Icons but when combining it with scss the "font-size" property dosen't work

2 Answers2