<p>According to the official documentation, </p>
<blockquote>
<p>Icon is a graphical icon widget drawn with a glyph from a font</p>
</blockquote>
<ul>
<li>Widget example</li>
<li>Theme based values<ul>
<li>Material app</li>
<li>IconTheme</li>
</ul>
</li>
<li>Why directionality</li>
<li>IconData<ul>
<li>What happens when we remove use-material-design</li>
<li>Trying out other IconData</li>
</ul>
</li>
<li>Improvement<ul>
<li>Multicolour icons</li>
<li>Non-square Icons</li>
</ul>
</li>
</ul>
<p>Let's see how to create a simple icon Widget</p>
<div class="gist-block embed-wrapper" data-gist-show-loading="false" data-id="84a7c7c4ea00b68e33e02d413d156699"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a href="https://gist.github.com/imrhk/84a7c7c4ea00b68e33e02d413d156699" class="embed-card">https://gist.github.com/imrhk/84a7c7c4ea00b68e33e02d413d156699</a></div><p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653913818072/xiBee1h1i.jpg" alt="1.jpg" /></p>
<p>Icon size can be changed but they are always going to remain square. Let's add size to the above icon widget</p>
<pre><code class="lang-dart">Icon(
    Icons.favorite,
    size: <span class="hljs-number">96</span>,
)
</code></pre>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653914303939/f5Yhyo9yp.jpg" alt="1.jpg" /></p>
<p>Icon color can be changed but there can be only single color. There are ways you can use shader to color your icons in different texture but that is beyond the scope of this article. </p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://www.youtube.com/watch?v=wI_a-vP7Hq4&amp;t=7s&amp;ab_channel=ScaffoldingwithRahul">https://www.youtube.com/watch?v=wI_a-vP7Hq4&amp;t=7s&amp;ab_channel=ScaffoldingwithRahul</a></div>


According to the official documentation, 

> Icon is a graphical icon widget drawn with a glyph from a font

- Widget example
- Theme based values
    - Material app
    - IconTheme
-  Why directionality
-  IconData
    - What happens when we remove use-material-design
    - Trying out other IconData
- Improvement
    - Multicolour icons
    - Non-square Icons

Let's see how to create a simple icon Widget

%[https://gist.github.com/imrhk/84a7c7c4ea00b68e33e02d413d156699]

![1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1653913818072/xiBee1h1i.jpg align="left")

Icon size can be changed but they are always going to remain square. Let's add size to the above icon widget

```dart
Icon(
    Icons.favorite,
    size: 96,
)
```

![1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1653914303939/f5Yhyo9yp.jpg align="left")

Icon color can be changed but there can be only single color. There are ways you can use shader to color your icons in different texture but that is beyond the scope of this article. 

%[https://www.youtube.com/watch?v=wI_a-vP7Hq4&t=7s&ab_channel=ScaffoldingwithRahul]




Code Rinse

Code Rinse

आइकन विजेट (Icon Widget)